Tailwind UIIntroducing CatalystOur new React UI kit
ComponentsTemplatesUI KitDocs
Sign inGet all-access →

Component playground

Get a better idea of how our components work by exploring our live playground.

  1. Step 1Find a componentFind the perfect component

    Every component is embedded live directly on the page, and you can even see what they look like at different breakpoints by dragging the slider on the right.

  2. Step 2Copy the snippet

    Click the "Code" tab to see the code for a component and grab the part that you need, or click the clipboard button to quickly copy the entire snippet in one step.

  3. Step 3Make it yours

    Every component is built entirely out of Tailwind utility classes, so you can easily dive in and adjust anything you want to better fit your use case.

Application UI
/
Elements
/
Badges

With border

Application UI
/
Lists
/
Stacked Lists

Simple

Application UI
/
Elements
/
Dropdowns

Simple

Requires JS
Application UI
/
Navigation
/
Navbars

Simple dark with menu button on left

Requires JS
Application UI
/
Navigation
/
Pagination

Card footer with page buttons

Application UI
/
Data Display
/
Description Lists

Left-aligned

Application UI
/
Forms
/
Form Layouts

Stacked

Application UI
/
Forms
/
Sign-in and Registration

Simple

Application UI
/
Elements
/
Dropdowns

With dividers

Requires JS
Application UI
/
Application Shells
/
Stacked Layouts

Dark nav with white page header

Requires JS
Application UI
/
Overlays
/
Drawers

With close button on outside

Requires JS
Application UI
/
Headings
/
Page Headings

With meta and actions

Requires JS
Application UI
/
Forms
/
Select Menus

Custom with avatar

Requires JS
Application UI
/
Overlays
/
Modal Dialogs

Simple with gray footer

Requires JS
Application UI
/
Elements
/
Avatars

Avatar group stacked bottom to top

Application UI
/
Forms
/
Input Groups

Input with inline leading add-on and trailing dropdown

Ecommerce
/
Components
/
Product Lists

With inline price

Images provided by Ugmonk

Ecommerce
/
Components
/
Category Previews

Three-column

Images provided by Ugmonk

Ecommerce
/
Components
/
Product Features

With image grid

Images provided by Ugmonk

Ecommerce
/
Components
/
Product Quickviews

With color and size selector

Requires JS

Images provided by Ugmonk

Ecommerce
/
Components
/
Store Navigation

With featured categories

Requires JS

Images provided by Ugmonk and QWSTION

Ecommerce
/
Components
/
Product Lists

Simple

Images provided by Ugmonk

Ecommerce
/
Components
/
Shopping Carts

Slide-over

Requires JS

Images provided by QWSTION

Ecommerce
/
Components
/
Product Overviews

With image grid

Requires JS

Images provided by QWSTION

Ecommerce
/
Components
/
Category Filters

With inline actions and expandable sidebar filters

Requires JS
Ecommerce
/
Components
/
Promo Sections

With image tiles

Images provided by Ugmonk

Marketing
/
Page Sections
/
Header Sections

With stats

Marketing
/
Page Sections
/
Contact Sections

Centered

Requires JS
Marketing
/
Page Sections
/
Blog Sections

Three-column

Marketing
/
Page Sections
/
Team Sections

With small images

Marketing
/
Page Sections
/
CTA Sections

Dark panel with app screenshot

Marketing
/
Page Sections
/
Stats

Simple

Marketing
/
Page Sections
/
Bento Grids

Three column bento grid

New

Marketing
/
Page Sections
/
Newsletter Sections

Side-by-side with details

Marketing
/
Page Sections
/
Hero Sections

Simple centered

Requires JS
Marketing
/
Elements
/
Banners

With button

Marketing
/
Page Sections
/
Logo Clouds

Simple with heading

Marketing
/
Feedback
/
404 Pages

Simple

Marketing
/
Page Sections
/
Testimonials

Simple centered

Marketing
/
Page Sections
/
Content Sections

With sticky product screenshot

Marketing
/
Page Sections
/
Feature Sections

With product screenshot

Marketing
/
Elements
/
Headers

With stacked flyout menu

Requires JS
Marketing
/
Elements
/
Flyout Menus

Stacked with footer actions

Requires JS
Marketing
/
Page Sections
/
Pricing Sections

Single price with details

Marketing
/
Page Sections
/
Feature Sections

Centered 2x2 grid

Footer

Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.


Marketing

  • Hero Sections
  • Feature Sections
  • Pricing Sections
  • Header Sections
  • Newsletter Sections
  • Testimonials
  • Team Sections
  • Content Sections
  • Logo Clouds
  • FAQs
  • Footers
  • Headers
  • Flyout Menus
  • Banners
  • Browse all →

Application UI

  • Tables
  • Feeds
  • Form Layouts
  • Select Menus
  • Radio Groups
  • Checkboxes
  • Comboboxes
  • Navbars
  • Pagination
  • Sidebar Navigation
  • Command Palettes
  • Modals
  • Dropdowns
  • Buttons
  • Browse all →

Ecommerce

  • Product Overviews
  • Product Lists
  • Category Previews
  • Shopping Carts
  • Category Filters
  • Product Quickviews
  • Product Features
  • Store Navigation
  • Promo Sections
  • Checkout Forms
  • Reviews
  • Order Summaries
  • Order History
  • Incentives
  • Browse all →

Templates & UI Kits

  • Catalyst UI Kit
  • Personal Website Template
  • Landing Page Template
  • API Reference Template
  • Changelog Template
  • Info Product Template
  • Agency Template
  • Podcast Template
  • App Marketing Template
  • Documentation Template
  • Conference Template
  • Browse all →

© 2024 Tailwind Labs Inc. All rights reserved.

Privacy policy
Changelog