framexEngine-pro/app/views/blocks/blog-list/blog-list-3.php

<section>
  <!-- Container -->
  <div class="band">
    <!-- Title -->
    <h2 class="text-center text-3xl font-bold md:text-5xl md:text-left">
      The latest and greatest news
    </h2>
    <p class="mb-8 mt-4 text-center text-sm text-gray-500 sm:text-base md:mb-12 lg:mb-16 md:text-left">
      Lorem ipsum dolor sit amet elit ut aliquam
    </p>
    <!-- Content -->
    <div class="mx-auto grid gap-8 md:grid-cols-2">
      <a href="javascript:void(0);" class="flex flex-col gap-4 rounded-md [grid-area:1/1/4/2] c-grid-area-1_1_4_2 md:pr-8">
        <img src="<?= image() ?>" alt="" class="inline-block h-72 w-full rounded object-cover" />
        <div class="flex flex-col items-start py-4">
          <div class="mb-4 rounded-md bg-gray-100 dark:bg-slate-900 px-2 py-1.5">
            <p class="text-sm eyebrow">
              FramexEngine
            </p>
          </div>
          <p class="mb-4 text-xl font-bold md:text-2xl">
            The latest news with Flowspark
          </p>
          <div class="flex flex-col text-sm text-gray-500 md:flex-row">
            <p>Laila Bahar</p>
            <p class="mx-2 hidden md:block">-</p>
            <p>6 mins read</p>
          </div>
        </div>
      </a>
      <div class="md:flex md:justify-between md:flex-col">
        <a href="javascript:void(0);" class="flex flex-col pb-5 md:mb-3 md:flex-row md:border-b md:border-gray-300">
          <img src="<?= image() ?>" alt="" class="inline-block h-60 w-full rounded object-cover md:h-32 md:w-32" />
          <div class="flex flex-col items-start pt-4 md:px-8">
            <div class="mb-2 rounded-md bg-gray-100 dark:bg-slate-900 px-2 py-1.5">
              <p class="text-sm eyebrow">
                FramexEngine
              </p>
            </div>
            <p class="mb-2 text-sm font-bold sm:text-base">
              Here is the title for this blog
            </p>
            <div class="flex flex-col items-start">
              <div class="flex flex-col text-sm text-gray-500 sm:text-base md:flex-row md:items-center">
                <p>Laila Bahar</p>
                <p class="mx-2 hidden md:block">-</p>
                <p>6 mins read</p>
              </div>
            </div>
          </div>
        </a>
        <a href="javascript:void(0);" class="flex flex-col pb-5 md:mb-3 md:flex-row md:border-b md:border-gray-300">
          <img src="<?= image() ?>" alt="" class="inline-block h-60 w-full rounded object-cover md:h-32 md:w-32" />
          <div class="flex flex-col items-start pt-4 md:px-8">
            <div class="mb-2 rounded-md bg-gray-100 dark:bg-slate-900 px-2 py-1.5">
              <p class="text-sm eyebrow">
                FramexEngine
              </p>
            </div>
            <p class="mb-2 text-sm font-bold sm:text-base">
              Here is the title for this blog
            </p>
            <div class="flex flex-col items-start">
              <div class="flex flex-col text-sm text-gray-500 sm:text-base md:flex-row md:items-center">
                <p>Laila Bahar</p>
                <p class="mx-2 hidden md:block">-</p>
                <p>6 mins read</p>
              </div>
            </div>
          </div>
        </a>
        <a href="javascript:void(0);" class="flex flex-col pb-5 md:mb-3 md:flex-row md:border-b md:border-gray-300">
          <img src="<?= image() ?>" alt="" class="inline-block h-60 w-full rounded object-cover md:h-32 md:w-32" />
          <div class="flex flex-col items-start pt-4 md:px-8">
            <div class="mb-2 rounded-md bg-gray-100 dark:bg-slate-900 px-2 py-1.5">
              <p class="text-sm eyebrow">
                FramexEngine
              </p>
            </div>
            <p class="mb-2 text-sm font-bold sm:text-base">
              Here is the title for this blog
            </p>
            <div class="flex flex-col items-start">
              <div class="flex flex-col text-sm text-gray-500 sm:text-base md:flex-row md:items-center">
                <p>Laila Bahar</p>
                <p class="mx-2 hidden md:block">-</p>
                <p>6 mins read</p>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>