Tailpine: UI components made with Tailwind CSS and Alpine JS

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.

See the Pen Alpine.js + Tailwind by eshnil (@eshnil) on CodePen.


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.

See the Pen TailPine SplitButtonDropdownwith TailwindCSS + AlpineJS by eshnil (@eshnil) on CodePen.

FlippableCard

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

See the Pen FlashCard with TailwindCSS+AlpineJS by eshnil (@eshnil) on CodePen.


Coming soon...

TagsInput, Carousel, Accordion, Tabs, Dismissable alerts etc


You should follow me on Fosstodon.