Card: Document

<div class="bg-blue-light rounded flex flex-col overflow-hidden">
    <div class="h-[130px] relative" tabindex="-1">
        <picture class="">
            <img class="absolute w-full h-full object-cover" srcset="http://placeimg.com/640/480/people 800w, http://placeimg.com/640/480/people 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="http://placeimg.com/640/480/people">
        </picture>
    </div>
    <div class="flex-1 p-6 relative">
        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
            <i class="fas fa-file-pdf fa-lg"></i>
        </div>
        <h4 class="text-2xl font-bold">Document title</h4>
        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
    </div>
    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
        <i class="fas fa-arrow-circle-down fa-2x"></i>
    </a>
</div>