Tailwind Blog Components in Bendis library

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="my-5 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-20">
      <div class="w-full lg:w-2/3 px-4 mb-20">
        <div class="relative flex h-96 mb-8 overflow-hidden">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
        </div>
        <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Quick problem-solving contact</h2>
        <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        <a class="text-sm uppercase font-bold text-blue-800 hover:underline" href="#">
          <span>Read more</span>
          <span class="inline-block ml-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Donec nec cursus nulla, quis aliquet ipsum</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1530389912609-9a007b3c38a4?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Fusce at condimentum diam</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Curabitur tortor erat, blandit sed tellus sed</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080464185-b0ebf9ede5cb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">In suscipit tellus convallis scelerisque consequat</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
    </div>
  </div>
</section>