Tailwind UI
Browse Pricing Login

Experience Tailwind UI

Get familiar with how Tailwind UI works by exploring some free sample components.

01

Find 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.

02

Copy 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.

03

Make 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.

These components require Tailwind CSS v1.2.0 and the @tailwindcss/ui plugin.

Learn more →

Dark nav with white page header

With meta and actions

Left-aligned striped in card

With avatars and multi-line content

Input with inline leading add-on and trailing dropdown

Simple no labels

Simple dark with menu button on left

Card footer with page buttons

Simple with gray footer

Avatar group stacked bottom to top

With dividers

With angled image on right

Centered 2x2 grid

Simple justified