Community-built
Tailwind CSS Components Library
Let's not stress about website designs. Create Stunning UIs Effortlessly, with Over 3000+ Ready to Use Components
Tailwind Playground
Experience the power of Tailwind CSS - Play around in our playground, with live preview and a user-friendly code editor.
Create, Save, Share.
Create, save, share and organize your components with ease. Save your components, share them with others, and keep your favorites at hand for easy access.
Public Profile
Make a name for yourself - Create a good profile and showcase your designing skills to the world.
Tags
-
440
-
233
-
213
-
195
-
173
-
156
-
153
-
126
-
118
-
115
-
112
-
107
Recent
-
Créer une storyCréer une story
17 hours ago1 -
plasma 2plasma 2
20 hours ago3 -
vscode a la omerlinksvscode a la omerlinks
20 hours ago6 -
about pageabout page
21 hours ago1 -
Sidebar Off canvasHow it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.
2 days ago6 -
Header and footer with Doodle design with Tailwind CSSCreative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects
2 days ago7 -
Avant & AprèsAvant & Après
4 days ago31 -
carde IptplusIptplus carde
4 days ago13 -
material ios navbar mobile apple endroidmaterial ios navbar mobile apple endroid
5 days ago10
Trending Users of last 30 days
-
# 128 components2.7k
-
# 220 components1.9k
-
# 3
$@(\/)(\/)¥Bringing web ideas to life! Full-stack developer with 5+ years of experience.
61 components1.7k -
# 4
ariawtelegram: @ariaw
40 components1.5k -
# 59 components1.1k
-
# 6Rajesh Maheshwari
Frontend Developer | Expert in React.js, Next.js, Tailwind CSS, HTML5 & CSS3
33 components858 -
# 7
Amit PachangeI'm an Artist, App developer and Web developer.
33 components841 -
# 8Homayoun
Frontend Developer with 3+ years of experience crafting responsive, high-performance web applications using JavaScript, React, Next.js, and Tailwind CSS. Boosted user engagement by 25%, improved SEO metrics and Core Web Vitals across multiple projects. Built scalable, maintainable solutions adopted by 2,000+ users, with increased engagement and reduced bug reports.
11 components823 -
# 9Code Master(Mfuranziza Dusabe Hamza)
Acode Master (Hamza) is a passionate Rwandan software developer, educator, and tech entrepreneur based in Rubavu. As the founder of a coding school for unemployed youth, he is committed to using technology to drive economic empowerment and equal opportunities. With a strong command of React.js, Node.js, PHP, MySQL, and PostgreSQL, he builds impactful digital solutions tailored to local and global challenges. He is currently leading EDUFORCE, an innovative edtech platform that blends AI and modern development tools to revolutionize access to quality education in Rwanda. His portfolio also includes projects like ClothingRentalProject, Byikorere Online Shop, Smart Barbershop Booking System, and the rugby-focused KIVU GIANTS RFC🏉 website. Acode Master is not only a top developer in Rubavu but also a visionary who believes in continuous learning, innovation, and community impact through code.
32 components801 -
# 10Prajwal Hallale
Hello there, I am a fullstack web developer.
61 components762 -
# 11
23 components630 -
# 12
MaximDesigner @ LQRS
43 components615 -
# 1320 components581
-
# 14Michael Andreuzza
❖ UI Design ✺ Front End Project: http://lexingtonthemes.com ⏤ Free & Premium themes crafted with Astro.js & Tailwind CSS
36 components571 -
# 15
34 components466
Trending Components of last 30 days
-
# 1
Flour mill website landing page templateflour mill and services template website which comprise of many sections like about us, featured products, why us, visit us
author
Amit Pachange756 -
# 2
Carousel Card Slider Swiper on Alpine.JSwith support drag and drop mouse actions
author
Maxim682 -
# 3
-
# 4
author
nejaa badr623 -
# 5
author
Brandon D579 -
# 6
Daystar Day care DashboardDaystar Day care Dashboard
author
Paul Livingstone Ssenoga570
F.A.Q
Who is responsible for creating and maintaining this library?
This library is a collaborative effort of the Tailwind CSS community. It's created and updated by contributors.
Are the components in the library free to use in my projects?
Yes, all components in the library are completely free to use in your personal or commercial projects. They are shared under open-source licenses, which allow for free usage, modification, and distribution.
How do I use the components from the library in my project?
Each component in the library comes with code snippet. You can copy and paste the provided code from component page.
Can I contribute to the library?
Absolutely! We encourage contributions from the community. If you have Tailwind CSS components or templates that you'd like to share, you can build and submit them to the library via Tailwind Playground . Be sure to follow our Contribution guidelines .
Stay Updated
Receive notifications about recently added high-quality components only once or twice a week. We do not spam.
