Basic card with different border and shadow options

<div class="card m-2 flex justify-center items-center p-12 border border-gray-200 rounded relative">
	<div>Card content</div>
</div>

<div class="card m-2 flex justify-center items-center p-12 shadow rounded relative">
	<div>Card content</div>
</div>

<div class="card m-2 flex justify-center items-center p-12 shadow-md rounded relative">
	<div>Card content</div>
</div>

<div class="card m-2 flex justify-center items-center rounded p-12 shadow-lg">
	<div>Card content</div>
</div>

Interactive cards

You can add any custom :hover classes you want to custom card elements, but using the .card--interactive modifier will apply a nice hover transition to the card.

<div class="card card--interactive cursor-pointer flex justify-center items-center rounded p-12 shadow-lg">
	<div>Card content</div>
</div>

Card with image and unique hover effects

Notice how this card uses .rounded on the parent and .rounded-sm on the inner container to make sure the border radius of the inner container fits into the parent container radius.

<a href="" class="card cursor-pointer flex flex-col items-center shadow rounded border-2 border-transparent hover:border-brand-primary m-2">
	<div class="w-full h-48 bg-no-repeat bg-center bg-cover rounded-sm rounded-b-none" style="background-image: url(https://source.unsplash.com/640x400/?tech)">&nbsp;</div>
	<div class="px-8 py-6 text-lg-1 text-black hover:text-brand-primary relative">
		Card title <i class="fal fa-arrow-right"></i>
	</div>
</a>

Interactive card with image and icon

<a href="" class="card card--interactive cursor-pointer m-2 flex flex-col items-center shadow-lg rounded">
	<div class="w-full h-48 bg-no-repeat bg-center bg-cover rounded rounded-b-none" style="background-image: url(https://source.unsplash.com/640x400/?nature)">&nbsp;</div>
	<div class="px-8 py-6 pr-20 text-lg-1 text-black relative w-full text-left">
		<span class="fas fa-play-circle rounded-full bg-white border-4 border-white text-lg-4 text-brand-primary absolute top-0 right-0 -mt-6 mr-6"></span>
		Card title
	</div>
</a>

Card with image and label

<div class="card cursor-pointer m-2 flex flex-col items-center border border-gray-200 rounded">
	<div class="w-full h-48 bg-no-repeat bg-center bg-cover rounded rounded-b-none" style="background-image: url(https://source.unsplash.com/640x400/?buildings)">&nbsp;</div>
	<div class="px-8 pt-8 pb-6 text-black relative w-full text-left">
		<span class="absolute top-0 left-0 bg-black text-white rounded-full uppercase font-sans-medium py-2 px-4 -mt-4 ml-6 leading-none">July 12-13 2018</span> 
		<div class="font-sans-medium">INACUFS National Conference 2018</div> 
		<div>Providence, RI</div> 
		<div>Booth 266</div>
	</div>
</div>