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