# Tailwind CSS UI Pattern Recipes Copy-paste patterns for common UI components. All examples use Tailwind v3+ utility classes. --- ## Responsive Navbar ```html ``` --- ## Card Grid ```html

Card Title

Brief description of the card content goes here.

Category View details →
``` --- ## Hero Section ```html
New Release

Build faster with modern tools

A concise value proposition that explains what the product does and why users should care.

Get started Learn more →
``` --- ## Form Layout ```html

We'll never share your email.

``` --- ## Modal Overlay ```html

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

``` --- ## Sidebar Layout ```html

Dashboard

``` --- ## Tips - Use `transition` and `hover:` for interactive feedback - Use `focus-visible:` instead of `focus:` for keyboard-only focus rings - Use `dark:` variants when supporting dark mode - Prefer `gap-*` over margin utilities for flex/grid spacing - Use `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` as a standard container