Spacing Example

<!doctype html>
<title>Tailwind CSS Spacing 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. Margin & Padding</h3>
      <div class="bg-blue-100 p-8 border border-blue-200 rounded-lg">
        <div class="bg-white p-4 m-8 border border-gray-300 rounded shadow-sm text-center">
          Padding 8, Margin 8
        </div>
        <div class="bg-white px-12 py-2 mb-4 border border-gray-300 rounded shadow-sm text-center">
          Horizontal padding 12, Vertical 2, Bottom margin 4
        </div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">2. Space Between (Parent utility)</h3>
      <div class="flex flex-col space-y-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="h-10 bg-emerald-500 rounded text-white flex items-center justify-center">First</div>
        <div class="h-10 bg-emerald-500 rounded text-white flex items-center justify-center">Second</div>
        <div class="h-10 bg-emerald-500 rounded text-white flex items-center justify-center">Third</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">3. Negative Margin (-mt-4)</h3>
      <div class="p-8 bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="h-16 bg-gray-200 rounded"></div>
        <div class="-mt-4 mx-auto w-3/4 h-8 bg-rose-500 text-white flex items-center justify-center rounded shadow-lg font-bold">
          I'm overlapping!
        </div>
      </div>
    </div>

</div>

</body>