Card: Background Image

<div class="rounded-lg overflow-hidden relative">
    <img class="w-full object-cover object-center h-full" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3374&q=80" />

    <div class="bg-black opacity-25 absolute top-0 left-0 w-full z-10 h-full"></div>

    <div class="p-mdSpace aspect-square absolute left-0 top-0 z-20 h-full">
        <div class="flex flex-col justify-between h-full items-start text-white">
            <h3>Heading</h3>

            <!-- Link element for page cta links -->
            <a href="#" class="btn-primary">View resource</a>
        </div>
    </div>
</div>