Libre - a responsive single page app template for collection management projects

  • By Amie Chen
  • Last update: Oct 28, 2022
  • Comments: 1

Libre - a responsive single page app template for collection management projects.

Libre Screenshot

Libre is a responsive single page app template designed for developers who want to create collection management-like projects (e.g. books, music, podcasts, games, etc.). Built with tailwind.css and vanilla javascript, this template is easily customizable and has common components like profile, lists, filters and popovers which sets the ground work for your projects. Libre is made for Codrops exclusively.

Running the project locally

Make sure your local version is v6+. I currently am using v10.8 as of Aug 2018.

npm install

If you want to regenerate css with your changes, run this command to generate css using tailwind config (e.g. tailwind.js)

$ ./node_modules/.bin/tailwind build style.css -c ./tailwind.js -o ./output.css

If you want to recompile the javascript, make sure browserify is installed globally then run this command to create bundle.js

$ npm install -g browserify
$ browserify main.js -o bundle.js

Check out the details on Codrops

Live Demo

👋 Libre Live Demo



Use it freely but please do not republish, distribute or sell "as-is". Read more about our license.


Follow Amie: Website, Dribbble, Github, Twitter, Medium

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2018



  • 1

    More tailwindcss

    Hey guys,

    First I'd like to thank you for giving away such quality & beautiful freebies. 🙌

    I noticed you used Tailwind CSS on this one and I find it weird that you created some custom classes for background-colors, paddings and leadings. That's typically how useful Tailwind CSS is with his powerful config file.

    So I made this PR to show how easy it is to add new colors, paddings, leadings with the config file.

    I also took advantage of the @apply directive of Tailwind CSS in the style.css file. It's not really relevant but it might help future users and Tailwind CSS beginners how they could use it for their needs.