<!-- Component Code -->
<div class="max-w-screen-xl mx-auto p-5 sm:p-10 md:p-16">
  <div class="grid grid-cols-1 md:grid-cols-3 sm:grid-cols-2 gap-10">
    
    <div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center" style="background-image:url(https://media.gettyimages.com/photos/at-the-the-network-tolo-televised-debate-dr-abdullah-abdullah-with-picture-id1179614034?k=6&m=1179614034&s=612x612&w=0&h=WwIX3RMsOQEn5DovD9J3e859CZTdxbHHD3HRyrgU3A8=);">
  <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900"></div>
      <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
        <a href="#" class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
      <div class="text-white font-regular flex flex-col justify-start">
        <span class="text-3xl leading-0 font-semibold">25</span>
        <span class="-mt-3">May</span>
      </div>
      </div>
  <main class="p-5 z-10">
    <a href="#" class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Dr. Abdullah Abdullah's Presidential Election Campaign
    </a>
      </main>
  
</div>
    
    <div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center" style="background-image:url(https://media.gettyimages.com/photos/ashraf-ghani-afghanistans-president-speaks-at-the-council-on-foreign-picture-id850794338?k=6&m=850794338&s=612x612&w=0&h=b_XBw5S38Cioslqr6VL3e36cWQU205IsInqDXZpDOD4=);">
  <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900"></div>
      <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
        <a href="#" class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
      <div class="text-white font-regular flex flex-col justify-start">
        <span class="text-3xl leading-0 font-semibold">10</span>
        <span class="-mt-3">Mar</span>
      </div>
      </div>
  <main class="p-5 z-10">
    <a href="#" class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Afghanistan's President Ashraf Ghani Speaks At The Council
    </a>
      </main>
  
</div>
    
    <div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center" style="background-image:url(https://media.gettyimages.com/photos/afghan-president-ashraf-ghani-arrives-to-the-welcoming-ceremony-the-picture-id694155252?k=6&m=694155252&s=612x612&w=0&h=IIJPetzJL-hAgPkE4hm2wUKvO4YOav8jJp484CgLEUs=);">
  <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900"></div>
      <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
        <a href="#" class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
      <div class="text-white font-regular flex flex-col justify-start">
        <span class="text-3xl leading-0 font-semibold">20</span>
        <span class="-mt-3">Jan</span>
      </div>
      </div>
  <main class="p-5 z-10">
    <a href="#" class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Middle East Participants Gather In Warsaw
    </a>
      </main>
  
</div>
    
  </div>
</div>

<!-- Credit: Componentity.com -->
<a href="https://componentity.com" target="_blank" class="block">
  <img src="http://codenawis.com/componentity/wp-content/uploads/2020/08/logo-componentity-%E2%80%93-9.png" class="w-48 mx-auto my-5">
</a>



  

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300,400;500,600;700&display=swap");

body {
  font-family: "Poppins", sans-serif !important;
}