Tailwind Playground

Rapidly prototype with Tailwind CSS utility classes. Select a category to explore the available utilities visually.

Master flex, grid, spacing, sizing, and positioning classes.

Master grid layouts using Tailwind utility classes.

Control font-size, weight, leading, tracking, and colors.

Experiment with rounded corners, border widths, and focus rings.

Apply shadows, opacity, mix-blend modes, and backdrop blurs.

Scale, rotate, translate, and skew elements using utility classes.

Manage background colors, gradients, images, and sizes.

Customize cursors, pointer events, and user selection behavior.

Use built-in animate classes and configure transitions.

Create custom tooltips with positioning, arrows, and visibility.

Design custom navigation links, breadcrumbs, and pagination styles.

Design and customize Tailwind CSS buttons with variants and sizes.

Style tables with borders, striping, spacing, and responsive wrappers.

Interactive switch components with simple, short, and icon variations.

Accessible checkbox lists with descriptions and various layouts.

Navigation tabs with underline, pills, and bar styles.

Customizable dropdowns with avatars, status indicators, and rich content.

Control element visibility using image and gradient masks.

Master scroll behavior, snap alignment, padding, and margin.

Control transition properties, duration, easing, and delays.