Flexbox Example

<!doctype html>
<title>Tailwind CSS Flexbox 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. Basic Row with Gap</h3>
      <div class="flex gap-4 p-4 bg-white rounded-lg shadow-sm">
        <div class="w-20 h-20 bg-blue-500 rounded flex items-center justify-center text-white font-bold text-xl">1</div>
        <div class="w-20 h-20 bg-blue-500 rounded flex items-center justify-center text-white font-bold text-xl">2</div>
        <div class="w-20 h-20 bg-blue-500 rounded flex items-center justify-center text-white font-bold text-xl">3</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">2. Direction & Justify (Center)</h3>
      <div class="flex flex-col sm:flex-row justify-center items-center gap-6 p-4 bg-white rounded-lg shadow-sm font-mono">
        <div class="px-6 py-3 bg-emerald-500 text-white rounded-full">Item A</div>
        <div class="px-6 py-3 bg-emerald-500 text-white rounded-full">Item B</div>
        <div class="px-6 py-3 bg-emerald-500 text-white rounded-full">Item C</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">3. Flex Grow</h3>
      <div class="flex gap-2 p-4 bg-white rounded-lg shadow-sm">
        <div class="flex-none w-16 h-12 bg-purple-500 text-white flex items-center justify-center rounded">Fixed</div>
        <div class="flex-grow h-12 bg-purple-200 text-purple-800 flex items-center justify-center rounded font-semibold italic">This container grows to fill space</div>
        <div class="flex-none w-16 h-12 bg-purple-500 text-white flex items-center justify-center rounded">Fixed</div>
      </div>
    </div>

</div>

</body>