Blog Components in Boldui library

<section class="bg-black overflow-hidden">
  <div class="flex flex-wrap">
    <div class="w-full">
      <div class="h-full py-52 bg-cover bg-center bg-no-repeat" style="background-image: url('boldui-assets/images/men4-light.png');">
        <div class="container mx-auto px-4">
          <div class="flex flex-wrap items-center justify-between">
            <div class="max-w-xl mb-6 lg:mb-0">
              <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
              <h2 class="mt-2 text-2xl text-white font-heading">Take quick action that increases your brand's regular profit.</h2>
            </div>
            <a class="inline-flex w-full md:w-auto items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
              <svg class="text-black mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="currentColor"></path>
              </svg>
              <span class="text-sm font-heading">Read article</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3">
      <a class="flex h-full px-4 py-40 items-center justify-center bg-cover bg-center bg-no-repeat" href="#" style="background-image: url('boldui-assets/images/men3.png');">
        <div class="relative max-w-xs px-10 text-center">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-64" src="boldui-assets/elements/ellipse-dark.svg" alt="">
          <div class="relative">
            <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
            <h3 class="mt-2 text-2xl text-white font-heading">Quick problem&nbsp;-&nbsp;solving contact</h3>
          </div>
        </div>
      </a>
    </div>
    <div class="w-full lg:w-1/3">
      <a class="flex px-4 py-40 items-center justify-center bg-cover bg-center bg-no-repeat" href="#" style="background-image: url('boldui-assets/images/photo-women.png');">
        <div class="relative max-w-xs px-10 text-center">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-64" src="boldui-assets/elements/ellipse-dark.svg" alt="">
          <div class="relative">
            <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
            <h3 class="mt-2 text-2xl text-white font-heading">Donec nec cursus nulla, quis aliquet ipsum</h3>
          </div>
        </div>
      </a>
    </div>
    <div class="w-full lg:w-1/3">
      <a class="flex px-4 py-40 items-center justify-center bg-cover bg-center bg-no-repeat" href="#" style="background-image: url('boldui-assets/images/men2.png');">
        <div class="relative max-w-xs px-10 text-center">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-64" src="boldui-assets/elements/ellipse-dark.svg" alt="">
          <div class="relative">
            <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
            <h3 class="mt-2 text-2xl text-white font-heading">In suscipit tellus convallis scelerisque consequat</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>