DEV Community

loading...
Cover image for Simple UI Component Library Project Based On Tailwind UI Components Design

Simple UI Component Library Project Based On Tailwind UI Components Design

nisargp08 profile image Nisarg Patel ・2 min read

Hey Everyone👋!
Welcome to my first ever online blog post. I have always been a fan of web design and believed in creating something elegant and beautiful but functional at the same time.

Several months ago I discovered a utility first framework called Tailwind CSS and after using it in a few of my projects I was hooked to the concept. Now from the start of my career, I have always been a front-end developer responsible for bringing the design files to life in a browser. Even though I consider myself to be quite good😅 at recreating those UI files I suck at creating a UI from scratch. A few months ago I learned that the founders of Tailwind CSS have launched a UI Components library called Tailwind UI built using Tailwind CSS.

After going through their UI components repository I was amazed by their simplistic design having functional use. So I challenged myself to recreate those UI components but only using CSS/SCSS.

At the point of writing this blog post, I have around 125 UI components on the website. Following are few UI component examples.

image
image
image

Now please note that this project is still in development and I will keep on adding new components from Tailwind UI whenever I have some spare time. Drop in a comment if you liked/disliked anything about those components.

Peace✌️

Discussion (2)

pic
Editor guide
Collapse
ericchapman profile image
Eric Chapman

Good job 👍

Collapse
nisargp08 profile image
Nisarg Patel Author

Thank you✌