<div class="container mx-auto mt-5">
<!-- Row 1 -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="bg-gray-200 p-5">Column 1</div>
<div class="bg-gray-200 p-5">Column 2</div>
<div class="bg-gray-200 p-5">Column 3</div>
<div class="bg-gray-200 p-5">Column 4</div>
</div>
<!-- Row 2 -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
<div class="bg-gray-200 p-5">Column 5</div>
<div class="bg-gray-200 p-5">Column 6</div>
<div class="bg-gray-200 p-5">Column 7</div>
<div class="bg-gray-200 p-5">Column 8</div>
</div>
</div>
<div class="container mx-auto">
  <div class="flex flex-col md:flex-row lg:grid lg:grid-cols-3 gap-4">
    
    <!-- Column 1 -->
    <div class="flex-1 p-6">
      <h2>Column 1</h2>
      <p>This is the content for the first column. On smaller screens, it will appear above the second column.</p>
    </div>

    <!-- Column 2 -->
    <div class="flex-1 p-6">
      <h2>Column 2</h2>
      <p>This is the content for the second column. On medium and larger screens, it will appear side-by-side with the first column.</p>
    </div>
    
    <!-- Column 3 -->
    <div class="flex-1 p-6">
      <h2>Column 3</h2>
      <p>This is the content for the third column. On medium and larger screens, it will appear side-by-side with the other columns.</p>
    </div>

  </div>
</div>
<h2 class="text-xl font-semibold mb-4">Simple Card</h2>
