
<a href="" class="rounded-[12px] overflow-hidden relative group lg:max-w-md max-w-[280px] block select-none">

    <div class="rounded-lg absolute bottom-0 h-3/4 w-full bg-gradient-to-t from-black via-transparent via-76%  opacity-90 group-hover:opacity-30 transition-opacity"></div>

    <img src="" width="480" height="300" alt="" class="rounded-lg min-h-[330px] w-full h-full object-cover z-1">


      
      



    

    <div class="p-4 absolute top-0">
        <div class="text-xs flex">
    <span 
        id="card_pubdate_" 
        class="text-white" 
        x-data="timeAgoComponent(null)" 
        x-init="updateTime()" 
        x-text="time">
    </span>
    
</div>
    </div>


    <div class="p-4 absolute bottom-0">
        
        <h2 class="m-0 text-white text-base leading-5 font-semibold whitespace-normal relative min-w-full line-clamp-3"></h2>
    </div>
</a>