Spacing & Sizing

<!-- Padding: p-{size}, px-{size}, py-{size}, pt-{size}, pr-{size}, pb-{size}, pl-{size} -->
<div class="p-4">all sides 1rem</div>
<div class="px-6 py-2">horizontal 1.5rem, vertical 0.5rem</div>
<div class="pt-8 pb-4">top 2rem, bottom 1rem</div>

<!-- Margin: same pattern with m- -->
<div class="m-4">1rem margin all sides</div>
<div class="mx-auto">center horizontally</div>
<div class="mt-8 mb-4">top 2rem, bottom 1rem</div>
<div class="space-y-4"><!-- children get 1rem gap between them --></div>

<!-- Width and Height -->
<div class="w-full">100% width</div>
<div class="w-1/2">50% width</div>
<div class="w-1/3">33.3% width</div>
<div class="w-64">16rem (256px) width</div>
<div class="w-screen">100vw</div>
<div class="max-w-lg">max-width: 32rem</div>
<div class="max-w-7xl mx-auto">centered page container</div>

<div class="h-screen">100vh</div>
<div class="h-64">16rem height</div>
<div class="min-h-screen">min-height: 100vh</div>

<!-- The spacing scale: 1 = 0.25rem, 2 = 0.5rem, 4 = 1rem, 8 = 2rem, 16 = 4rem -->
<!-- Common sizes: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 -->

<!-- Practical card layout -->
<div class="max-w-sm mx-auto mt-8 p-6 bg-white rounded-xl shadow-md">
  <div class="flex items-center gap-4 mb-4">
    <img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="User" />
    <div>
      <h3 class="font-semibold text-gray-900">Alice Smith</h3>
      <p class="text-sm text-gray-500">Software Engineer</p>
    </div>
  </div>
  <p class="text-gray-600 leading-relaxed mb-4">
    Building things on the web. Loves Tailwind.
  </p>
  <div class="flex gap-2">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium">Follow</button>
    <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium">Message</button>
  </div>
</div>