<div class="grid grid-cols-2 gap-4">
  <div
    class="card w-48 hover:shadow-none items-center h-max bg-blue-200 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-[4px_4px_0px_rgb(255,255,255)] dark:border-white"
  >
    <div class="px-6 py-5 text-left h-full">
      <p class="text-base mb-4">July 22th, 2024</p>
      <h1 class="text-[32px] mb-4">Title Card</h1>
      <p class="text-xs mb-4 line-clamp-4">
        orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae
        nisi odio. Donec ut dui sollicitudin, ultrices nisl ut, porta sem. Cras
        fringilla sem eget aliquam euismod. In aliquam accumsan turpis et
        maximus. Nunc congue est vel est pulvinar laoreet. Sed pellentesque eros
        ac nisi porta, vestibulum pretium justo convallis. Maecenas non risus et
        arcu tristique dapibus fringilla fringilla ex. Morbi eros nunc, sagittis
        sed erat iaculis, varius sodales nunc. Nunc vulputate ante sit amet
        finibus egestas. Quisque eu tristique lacus. Nulla eget maximus magna.
        Morbi sed congue nibh, ut fringilla purus. Vivamus imperdiet in augue id
        bibendum. Morbi dolor metus, blandit at molestie id, rutrum sed turpis.
        Ut rutrum dignissim quam, a bibendum felis vulputate a.
      </p>
      <strong class="cursor-pointer">Read More</strong>
    </div>
  </div>
  <div
    class="card w-48 hover:shadow-none items-center h-max bg-green-200 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-[4px_4px_0px_rgb(255,255,255)] dark:border-white"
  >
    <div class="px-6 py-5 text-left h-full">
      <p class="text-base mb-4">July 22th, 2024</p>
      <h1 class="text-[32px] mb-4">Title Card</h1>
      <p class="text-xs mb-4 line-clamp-4">
        orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae
        nisi odio. Donec ut dui sollicitudin, ultrices nisl ut, porta sem. Cras
        fringilla sem eget aliquam euismod. In aliquam accumsan turpis et
        maximus. Nunc congue est vel est pulvinar laoreet. Sed pellentesque eros
        ac nisi porta, vestibulum pretium justo convallis. Maecenas non risus et
        arcu tristique dapibus fringilla fringilla ex. Morbi eros nunc, sagittis
        sed erat iaculis, varius sodales nunc. Nunc vulputate ante sit amet
        finibus egestas. Quisque eu tristique lacus. Nulla eget maximus magna.
        Morbi sed congue nibh, ut fringilla purus. Vivamus imperdiet in augue id
        bibendum. Morbi dolor metus, blandit at molestie id, rutrum sed turpis.
        Ut rutrum dignissim quam, a bibendum felis vulputate a.
      </p>
      <strong class="cursor-pointer">Read More</strong>
    </div>
  </div>
  <div
    class="card w-48 hover:shadow-none items-center h-max bg-yellow-200 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-[4px_4px_0px_rgb(255,255,255)] dark:border-white"
  >
    <div class="px-6 py-5 text-left h-full">
      <p class="text-base mb-4">July 22th, 2024</p>
      <h1 class="text-[32px] mb-4">Title Card</h1>
      <p class="text-xs mb-4 line-clamp-4">
        orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae
        nisi odio. Donec ut dui sollicitudin, ultrices nisl ut, porta sem. Cras
        fringilla sem eget aliquam euismod. In aliquam accumsan turpis et
        maximus. Nunc congue est vel est pulvinar laoreet. Sed pellentesque eros
        ac nisi porta, vestibulum pretium justo convallis. Maecenas non risus et
        arcu tristique dapibus fringilla fringilla ex. Morbi eros nunc, sagittis
        sed erat iaculis, varius sodales nunc. Nunc vulputate ante sit amet
        finibus egestas. Quisque eu tristique lacus. Nulla eget maximus magna.
        Morbi sed congue nibh, ut fringilla purus. Vivamus imperdiet in augue id
        bibendum. Morbi dolor metus, blandit at molestie id, rutrum sed turpis.
        Ut rutrum dignissim quam, a bibendum felis vulputate a.
      </p>
      <strong class="cursor-pointer">Read More</strong>
    </div>
  </div>
  <div
    class="card w-48 hover:shadow-none items-center h-max bg-red-200 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-[4px_4px_0px_rgb(255,255,255)] dark:border-white"
  >
    <div class="px-6 py-5 text-left h-full">
      <p class="text-base mb-4">July 22th, 2024</p>
      <h1 class="text-[32px] mb-4">Title Card</h1>
      <p class="text-xs mb-4 line-clamp-4">
        orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae
        nisi odio. Donec ut dui sollicitudin, ultrices nisl ut, porta sem. Cras
        fringilla sem eget aliquam euismod. In aliquam accumsan turpis et
        maximus. Nunc congue est vel est pulvinar laoreet. Sed pellentesque eros
        ac nisi porta, vestibulum pretium justo convallis. Maecenas non risus et
        arcu tristique dapibus fringilla fringilla ex. Morbi eros nunc, sagittis
        sed erat iaculis, varius sodales nunc. Nunc vulputate ante sit amet
        finibus egestas. Quisque eu tristique lacus. Nulla eget maximus magna.
        Morbi sed congue nibh, ut fringilla purus. Vivamus imperdiet in augue id
        bibendum. Morbi dolor metus, blandit at molestie id, rutrum sed turpis.
        Ut rutrum dignissim quam, a bibendum felis vulputate a.
      </p>
      <strong class="cursor-pointer">Read More</strong>
    </div>
  </div>
</div>