Tailwind CSS patterns and common recipes

Need common UI patterns implemented with Tailwind CSS utility classes.

Essential Tailwind patterns:

<!-- Centered content with max-width -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  Content
</div>

<!-- Card -->
<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-gray-900">Title</h3>
  <p class="mt-2 text-sm text-gray-600">Description</p>
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <!-- Cards -->
</div>

<!-- Truncated text -->
<p class="truncate">Very long text...</p>
<p class="line-clamp-3">Multi-line clamp to 3 lines...</p>

<!-- Visually hidden (accessible) -->
<span class="sr-only">Screen reader text</span>

<!-- Glass morphism -->
<div class="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-lg">
  Frosted glass effect
</div>

<!-- Gradient text -->
<h1 class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
  Gradient Heading
</h1>

<!-- Dark mode -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  Adapts to dark mode
</div>

<!-- Focus ring (accessible) -->
<button class="rounded-md bg-blue-600 px-4 py-2 text-white
               hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Button
</button>

<!-- Sticky header -->
<header class="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-sm">
  Navigation
</header>

Tailwind's utility-first approach eliminates context switching between HTML and CSS files. These patterns cover the most common UI needs.

Building UIs with Tailwind CSS