Home
Anonymous
cards

cards

cards with background animation

This tailwind example is contributed by Anonymous, on 13-Aug-2023. Component is made with Tailwind CSS v3. It is responsive.

Card Other

Author Anonymous

9.3k

Fork Fullscreen

<div class="area">

<div class="w-1/2 px-4 lg:w-1/3">
		<div class="bg-white shadow-lg rounded-lg overflow-hidden my-6 grid grid-cols-[auto,1fr]">
			<div class="bg-gray-100 px-5 py-2   grid items-end justify-center __col h-full">
				<a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
			</div>
			<div class="p-6">
				<h2 class="text-xl font-semibold text-gray-800 mb-4">Fast Performance</h2>
				<p class="text-gray-600">Suspendisse tincidunt metus vitae libero auctor, at aliquam purus. Morbi sit
					amet lectus non sapien aliquet rutrum.</p>
			</div>
		</div>
	</div>

<div class="w-1/2 px-4 lg:w-1/3">
		<div class="bg-white shadow-lg rounded-lg overflow-hidden my-6 grid grid-cols-[auto,1fr]">
			<div class="bg-gray-100 px-5 py-2   grid items-end justify-center __col h-full">
				<a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
			</div>
			<div class="p-6">
				<h2 class="text-xl font-semibold text-gray-800 mb-4">Elegance</h2>
				<p class="text-gray-600">Suspendisse tincidunt metus vitae libero auctor, at aliquam purus. Morbi sit
					amet lectus non sapien aliquet rutrum.</p>
			</div>
		</div>
	</div>

<div class="w-1/2 px-4 lg:w-1/3">
		<div class="bg-white shadow-lg rounded-lg overflow-hidden my-6 grid grid-cols-[auto,1fr]">
			<div class="bg-gray-100 px-5 py-2   grid items-end justify-center __col h-full">
				<a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
			</div>
			<div class="p-6">
				<h2 class="text-xl font-semibold text-gray-800 mb-4">Spacial Diversity</h2>
				<p class="text-gray-600">Suspendisse tincidunt metus vitae libero auctor, at aliquam purus. Morbi sit
					amet lectus non sapien aliquet rutrum.</p>
			</div>
		</div>
	</div>
	<ul class="circles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

Related Examples