Free Tailwind CSS UI Kit

419 copy-paste Tailwind CSS components in 36 categories, from buttons and cards to checkout forms, navbars and full hero sections. Every component is plain HTML with Tailwind utility classes, so it drops into any project. React users can copy the JSX version instead.

Pick a category below, open the HTML tab on any component and copy it. Each one is responsive, and the interactive ones (modals, tabs, toggles) include the small script they need.

Elements (160 components)

• Buttons

  26 componentsBrowse a collection of versatile Tailwind CSS button components.

• Alerts

  24 componentsDiscover a collection of ready-to-use Tailwind CSS alert components.

• Cards

  39 componentsDiscover a wide collection of Tailwind CSS card components.

• Modals

  19 componentsExplore a collection of responsive Tailwind CSS modal components.

• Tables

  8 componentsExplore a collection of responsive Tailwind CSS table templates.

• Tabs

  8 componentsExplore a collection of responsive Tailwind CSS tab components.

• Toggles

  5 componentsExplore a collection of responsive Tailwind CSS toggle switch components.

• Tooltips

  7 componentsExplore a collection of responsive Tailwind CSS tooltip components.

• Breadcrumbs

  6 componentsExplore a variety of Tailwind CSS breadcrumb navigation components.

• Pagination

  18 componentsExplore a variety of Tailwind CSS pagination components.

Navigation (36 components)

• Navbars

  6 componentsDiscover a collection of modern Tailwind CSS navbar templates.

• Headers

  15 componentsExplore a collection of responsive Tailwind CSS header sections, including navigation bars, hero headers, and sticky...

• Sidebars

  5 componentsExplore a collection of responsive Tailwind CSS sidebar templates.

• Footers

  10 componentsBrowse a collection of responsive Tailwind CSS footer templates.

Page sections (133 components)

• Hero Sections

  9 componentsDiscover a collection of impactful Tailwind CSS hero sections.

• CTA Sections

  17 componentsDiscover a range of effective Tailwind CSS Call to Action (CTA) sections.

• Feature Sections

  13 componentsExplore responsive Tailwind CSS site feature section templates.

• Pricing Sections

  12 componentsDiscover a variety of responsive Tailwind CSS pricing section templates.

• Testimonial Sections

  9 componentsExplore responsive Tailwind CSS testimonial section templates.

• Team Sections

  12 componentsExplore responsive Tailwind CSS 'Meet the Team' section templates.

• Stats Sections

  11 componentsExplore responsive Tailwind CSS stats section templates.

• Logo Clouds

  6 componentsExplore responsive Tailwind CSS logo cloud components.

• Portfolio Sections

  13 componentsDiscover a collection of responsive Tailwind CSS portfolio section templates.

• Blog Sections

  19 componentsFind versatile Tailwind CSS blog section templates.

• FAQ Sections

  7 componentsExplore a collection of Tailwind CSS FAQ section templates.

• 404 Pages

  5 componentsExplore a collection of beautifully designed Tailwind CSS 404 error page templates.

Forms (90 components)

• Login Forms

  4 componentsDiscover a collection of modern and responsive Tailwind CSS login form templates.

• Signup Forms

  5 componentsDiscover modern and responsive Tailwind CSS signup form templates.

• Forgot Password Forms

  4 componentsDiscover responsive Tailwind CSS 'Reset Password' form templates.

• Contact Forms

  14 componentsFind modern and responsive Tailwind CSS contact form templates.

• Search Forms

  13 componentsDiscover responsive Tailwind CSS search form templates.

• Newsletter Forms

  6 componentsFind responsive Tailwind CSS subscription form templates.

• Booking Forms

  6 componentsDiscover ready-to-use Tailwind CSS booking and reservation form templates.

• Checkout Forms

  16 componentsFind responsive and user-friendly Tailwind CSS checkout form templates.

• Account Settings Forms

  16 componentsFind responsive Tailwind CSS profile form templates.

• File Upload Forms

  6 componentsDiscover responsive Tailwind CSS file upload form templates.

How to use these components

1. Add Tailwind CSS v3.4 to your project. The Tailwind setup guide covers the install.
2. Open a category, switch a component to its HTML tab and click Copy. Use Copy as JSX for React.
3. Change colors, spacing and sizes with utility classes. Nothing depends on custom CSS.

Learn Tailwind CSS

• GuideUnveiling the Power: What is Tailwind CSS?
• GuideMastering Efficiency: How to Use Tailwind
• GuideTailwind vs Bootstrap: The Ultimate Showdown
• GuideTailwind CSS vs CSS: Revolutionizing Styling