Untitled

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- Content 1 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content1</h2>
  </div>
  <!-- Content 2 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content2</h2>
  </div>
  <!-- Content 3 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content3</h2>
  </div>
  <!-- Content 4 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content4</h2>
  </div>
  <!-- Content 5 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content5</h2>
  </div>
  <!-- Content 6 -->
  <div class="flex items-center justify-center bg-white shadow-md rounded-lg">
    <h2 class="text-xl font-bold text-gray-700">Content6</h2>
  </div>
</div>