grids.html

<div class="space-y-12">
  <div class="grid-container m-10">
    <div class="grid-content">
      <h1 class="text-2xl">grid-content</h1>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
    </div>
  </div>

  <div class="grid-container m-10">
    <div class="grid-full">
      <h1 class="text-2xl">grid-full</h1>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
    </div>
  </div>

  <div class="grid-container m-10">
    <div class="grid-left-side">
      <h1 class="text-2xl">grid-left-side</h1>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
    </div>
  </div>
  <div class="grid-container m-10">
    <div class="grid-left-side-with-content">
      <div>
      <h1 class="text-2xl">grid-left-side-with-content"</h1>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      </div>
    </div>
  </div>

  <div class="grid-container m-10">
    <div class="grid-right-side">
      <h1 class="text-2xl">grid-right-side</h1>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
    </div>
  </div>

  <div class="grid-container m-10">
    <div class="grid-content-with-right-side">
      <h1 class="text-2xl">grid-content-with-right-side</h1>
      <div>
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      mpus purus at lorem. Etiam neque. Cras pede lib
      </div>
    </div>
  </div>
</div>

<div class="grid md:grid-cols-2 gap-8 py-4">
  <div class="space-y-4">A</div>
  <div class="space-y-4">B</div>
</div>

<div class="grid md:grid-cols-3 gap-8 py-4">
  <div class="space-y-4">A</div>
  <div class="space-y-4">B</div>
  <div class="space-y-4">C</div>
</div>