Blog Card Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet"
/>

<style>
  .body {
    font-family: "Plus Jakarta Sans", sans-serif;
  }
</style>

<section
  class="justify-center max-w-5xl mx-auto overflow-hidden text-gray-600 body-font"
>
  <div class="container px-5 py-24 mx-auto">
    <div class="-my-8">
      <div class="flex flex-col my-8 shadow-xl md:flex-row rounded-xl">
        <div class="mb-6 md:mb-0 md:w-3/12">
          <img
            class="object-cover w-full h-full rounded"
            src="https://images.unsplash.com/photo-1667900735350-f664871c18c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fEVudmlyb25tZW50YWwlMjBDb25zZXJ2YXRpb258ZW58MHwwfDB8fHwy&auto=format&fit=crop&w=500&q=60"
            alt="Articel 1"
          />
        </div>
        <div class="p-8 md:w-9/12">
          <span class="mt-1 text-sm text-gray-500">15 Sep 2023</span>
          <h2 class="mb-2 text-2xl font-medium text-gray-900 title-font">
            The Importance of Environmental Conservation: Our Efforts for a
            Greener Future
          </h2>
          <p class="leading-relaxed">
            The environment is a precious heritage we possess, yet often forget.
            Amidst economic growth and technological advancements, the need for
            environmental preservation has become increasingly urgent. A healthy
            environment is the key to a better future.
          </p>
          <a
            class="inline-flex items-center justify-end w-full mt-4 text-blue-500 cursor-pointer hover:underline"
            >Learn More
          </a>
        </div>
      </div>
      <div class="flex flex-col my-8 shadow-xl md:flex-row rounded-xl">
        <div class="mb-6 md:mb-0 md:w-3/12">
          <img
            class="object-cover w-full h-full rounded"
            src="https://images.unsplash.com/photo-1689969935587-c45afade51ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fEVudmlyb25tZW50YWwlMjBDb25zZXJ2YXRpb258ZW58MHwwfDB8fHwy&auto=format&fit=crop&w=500&q=60"
            alt="Articel 1"
          />
        </div>
        <div class="p-8 md:w-9/12">
          <span class="mt-1 text-sm text-gray-500">10 Sep 2023</span>
          <h2 class="mb-2 text-2xl font-medium text-gray-900 title-font">
            Developing an Eco-Friendly Lifestyle: Small Steps Toward Big Changes
          </h2>
          <p class="leading-relaxed">
            Our lifestyle choices have a significant impact on the environment.
            Simple actions we take every day, such as proper waste disposal,
            water conservation, and reducing plastic use, can make a big
            difference in preserving the environment.
          </p>
          <a
            class="inline-flex items-center justify-end w-full mt-4 text-blue-500 cursor-pointer hover:underline"
            >Learn More
          </a>
        </div>
      </div>
    </div>
  </div>
</section>