cards

cards with background animation

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

Card Other

Author Anonymous

Tailwind v3.4 11.9k 15

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

background animation
background animation

Anonymous

3 years ago

53k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Concert ticket

Elijah Davis

3 years ago

14.1k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Show user details

Lucas Martinez

3 years ago

26.2k
Chat template
fullscreen chat template suitable for mobile devices

Manon Daniel

3 years ago

18.2k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Tailwind card with gradient border

Elijah Davis

3 years ago

16.2k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k