Sizing Example

<!doctype html>
<title>Tailwind CSS Sizing Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8">

<div class="max-w-4xl mx-auto space-y-12">
    
    
    <div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">1. Fixed Width & Height</h3>
      <div class="flex items-end gap-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200 h-48">
        <div class="w-12 h-12 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-12 h-12</div>
        <div class="w-16 h-24 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-16 h-24</div>
        <div class="w-24 h-32 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-24 h-32</div>
        <div class="w-32 h-40 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-32 h-40</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">2. Fractional Widths</h3>
      <div class="space-y-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="w-full bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-full</div>
        <div class="w-3/4 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-3/4</div>
        <div class="w-1/2 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-1/2</div>
        <div class="w-1/4 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-1/4</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">3. Max-Width Constraints</h3>
      <div class="space-y-4">
        <div class="max-w-sm mx-auto bg-purple-500 text-white p-4 rounded-lg shadow-lg text-center font-semibold">
          max-w-sm
        </div>
        <div class="max-w-md mx-auto bg-purple-500 text-white p-4 rounded-lg shadow-lg text-center font-semibold">
          max-w-md
        </div>
      </div>
    </div>

</div>

</body>