Source: https://tailwindcss.com/plus/ui-blocks/preview

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

1. Step 1

   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.

2. Step 2

   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.

3. Step 3

   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.

Simple centered

---

PreviewCode

HTMLReactVue

Simple centered

---

PreviewCode

HTMLReactVue

With product screenshot

---

PreviewCode

HTMLReactVue

With product screenshot

---

PreviewCode

HTMLReactVue

Centered 2x2 grid

---

PreviewCode

HTMLReactVue

Centered 2x2 grid

---

PreviewCode

HTMLReactVue

Dark panel with app screenshot

---

PreviewCode

HTMLReactVue

Dark panel with app screenshot

---

PreviewCode

HTMLReactVue

Three column bento grid

---

PreviewCode

HTMLReactVue

Three column bento grid

---

PreviewCode

HTMLReactVue

Two tiers with emphasized right tier

---

PreviewCode

HTMLReactVue

Two tiers with emphasized right tier

---

PreviewCode

HTMLReactVue

With stats

---

PreviewCode

HTMLReactVue

With stats

---

PreviewCode

HTMLReactVue

Side-by-side with details

---

PreviewCode

HTMLReactVue

Side-by-side with details

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple centered

---

PreviewCode

HTMLReactVue

Simple centered

---

PreviewCode

HTMLReactVue

Three-column

---

PreviewCode

HTMLReactVue

Three-column

---

PreviewCode

HTMLReactVue

Centered

---

PreviewCode

HTMLReactVue

Centered

---

PreviewCode

HTMLReactVue

With small images

---

PreviewCode

HTMLReactVue

With small images

---

PreviewCode

HTMLReactVue

With sticky product screenshot

---

PreviewCode

HTMLReactVue

With sticky product screenshot

---

PreviewCode

HTMLReactVue

Simple with heading

---

PreviewCode

HTMLReactVue

Simple with heading

---

PreviewCode

HTMLReactVue

With stacked flyout menu

---

PreviewCode

HTMLReactVue

With stacked flyout menu

---

PreviewCode

HTMLReactVue

Stacked with footer actions

---

PreviewCode

HTMLReactVue

Stacked with footer actions

---

PreviewCode

HTMLReactVue

With button

---

PreviewCode

HTMLReactVue

With button

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

With lighter page header

---

PreviewCode

HTMLReactVue

With lighter page header

---

PreviewCode

HTMLReactVue

With meta and actions

---

PreviewCode

HTMLReactVue

With meta and actions

---

PreviewCode

HTMLReactVue

Left-aligned

---

PreviewCode

HTMLReactVue

Left-aligned

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Stacked

---

PreviewCode

HTMLReactVue

Stacked

---

PreviewCode

HTMLReactVue

Input with inline leading add-on and trailing dropdown

---

PreviewCode

HTMLReactVue

Input with inline leading add-on and trailing dropdown

---

PreviewCode

HTMLReactVue

Custom with avatar

---

PreviewCode

HTMLReactVue

Custom with avatar

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple dark with menu button on left

---

PreviewCode

HTMLReactVue

Simple dark with menu button on left

---

PreviewCode

HTMLReactVue

Card footer with page buttons

---

PreviewCode

HTMLReactVue

Card footer with page buttons

---

PreviewCode

HTMLReactVue

Simple with gray footer

---

PreviewCode

HTMLReactVue

Simple with gray footer

---

PreviewCode

HTMLReactVue

With close button on outside

---

PreviewCode

HTMLReactVue

With close button on outside

---

PreviewCode

HTMLReactVue

Avatar group stacked bottom to top

---

PreviewCode

HTMLReactVue

Avatar group stacked bottom to top

---

PreviewCode

HTMLReactVue

With border

---

PreviewCode

HTMLReactVue

With border

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

Simple

---

PreviewCode

HTMLReactVue

With dividers

---

PreviewCode

HTMLReactVue

With dividers

---

PreviewCode

HTMLReactVue

With image grid

---

PreviewCode

HTMLReactVue

Images provided by QWSTION

With image grid

---

PreviewCode

HTMLReactVue

Images provided by QWSTION

With inline price

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With inline price

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

Simple

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

Simple

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

Three-column

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

Three-column

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

Drawer

---

PreviewCode

HTMLReactVue

Images provided by QWSTION

Drawer

---

PreviewCode

HTMLReactVue

Images provided by QWSTION

With inline actions and expandable sidebar filters

---

PreviewCode

HTMLReactVue

With inline actions and expandable sidebar filters

---

PreviewCode

HTMLReactVue

With color and size selector

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With color and size selector

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With image grid

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With image grid

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With featured categories

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk and QWSTION

With featured categories

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk and QWSTION

With image tiles

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk

With image tiles

---

PreviewCode

HTMLReactVue

Images provided by Ugmonk