TailPine: UI Components with TailwindCSS and AlpineJS

For LearnAwesome.org, I have been building some UI components. I decided to share those here because I thought others might find them useful.

For issues and discussion, please use Github issues.

Five-star rating input:

This is used for rating learning resources. The idea here is to make it behave seamlessly like a <input type="number"/> so that it can be used with Rails form-builder or any other framework.

SplitButton Dropdown

This behaves like the buttons on GoodReads and OpenLibrary. The button performs a default action and the menu lets the user choose a different action. LearnAwesome shows users collections as menu items and updates via AJAX. To keep things simple, I'm showing simple links in the dropdown here.

FlippableCard

We plan to use this in our spaced-repetition based flashcard practice module.

Mac OS Dock animation

It just took 12 lines of Javascript!

Coming soon

TagsInput, Carousel, Accordion, Tabs, Dismissable alerts etc

Last updated