Responsive Design & States

<!-- Breakpoints (min-width):
  sm:   640px
  md:   768px
  lg:  1024px
  xl:  1280px
  2xl: 1536px
-->

<!-- Mobile-first: no prefix = all screens, prefixed = that breakpoint and up -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Heading
</h1>

<div class="flex flex-col md:flex-row gap-6">
  <main class="md:w-2/3">Stack on mobile, side by side on md+</main>
  <aside class="md:w-1/3">Sidebar</aside>
</div>

<!-- Show/hide at breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>

<!-- Responsive padding -->
<section class="px-4 sm:px-6 lg:px-8">
  Content with responsive horizontal padding
</section>

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-gray-100 p-4 rounded">Card 1</div>
  <div class="bg-gray-100 p-4 rounded">Card 2</div>
  <div class="bg-gray-100 p-4 rounded">Card 3</div>
  <div class="bg-gray-100 p-4 rounded">Card 4</div>
</div>

<!-- State modifiers -->

<!-- hover: — applies on mouse hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors">
  Hover me
</button>

<!-- focus: — applies when focused (keyboard/click) -->
<input class="border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

<!-- active: — applies while being clicked -->
<button class="bg-blue-500 active:scale-95 transition-transform px-4 py-2 rounded text-white">
  Click me
</button>

<!-- disabled: — applies to disabled elements -->
<button disabled class="bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-2 rounded">
  Disabled
</button>

<!-- group + group-hover — parent controls child state -->
<div class="group flex items-center gap-3 p-4 hover:bg-gray-50 rounded-lg cursor-pointer">
  <span class="text-gray-600 group-hover:text-blue-500 transition-colors">File.txt</span>
  <button class="opacity-0 group-hover:opacity-100 transition-opacity text-red-400">✕</button>
</div>

<!-- dark: — applies in dark mode (requires darkMode: 'class' in config) -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-4">
  Adapts to dark mode
</div>