Card Component

This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

This tailwind example is contributed by Shariar Hasan, on 15-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author Shariar Hasan

Tailwind v3.4 4.3k 9

Fork Fullscreen

<div class="min-h-screen w-screen dark:bg-gray-900 dark:text-gray-100">
	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 my-10 md:gap-5 max-w-7xl mx-auto px-3">
	<div data-sr-id="279"
		style="visibility: visible; opacity: 1; transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s;"><a
			href="/my-blogs/f4c5688f13ea">
			<div
				class="duration-200 h-full overflow-hidden group px-2 py-2 rounded-t hover:bg-block  hover:text-green-500 border-l-4 border-transparent hover:border-green-500">
				<h1 class="text-base mb-1 tracking-wider">Codeforces Handle Name Changes</h1>
				<p class="flex flex-wrap gap-2 items-center">
					<span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">name-change</span><span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">codeforces</span>
				</p>
				<p class="text-[10px] text-gray-600 dark:text-gray-300 mt-2">Published: 2024-01-05 16:21:04</p>
			</div>
		</a></div>
	<div data-sr-id="281"
		style="visibility: visible; opacity: 1; transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.1s;"><a
			href="/my-blogs/f0fe640ded0d">
			<div
				class=" duration-200 h-full overflow-hidden group px-2 py-2 rounded-t hover:bg-block  hover:text-green-500 border-l-4 border-transparent hover:border-green-500">
				<h1 class="text-base mb-1 tracking-wider">Sorting with index in JavaScript</h1>
				<p class="flex flex-wrap gap-2 items-center">
					<span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">sorting</span><span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">index</span><span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">javascript</span>
				</p>
				<p class="text-[10px] text-gray-600 dark:text-gray-300 mt-2">Published: 2023-09-14 09:23:03</p>
			</div>
		</a></div>
	<div data-sr-id="282"
		style="visibility: visible; opacity: 1; transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.2s;"><a
			href="/my-blogs/21aed16dfbe3">
			<div
				class=" duration-200 h-full overflow-hidden group px-2 py-2 rounded-t hover:bg-block  hover:text-green-500 border-l-4 border-transparent hover:border-green-500">
				<h1 class="text-base mb-1 tracking-wider">Capitalizing Strings in JavaScript: Different Methods</h1>
				<p class="flex flex-wrap gap-2 items-center">
					<span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">capitalization</span><span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">string-manipulation</span>
				</p>
				<p class="text-[10px] text-gray-600 dark:text-gray-300 mt-2">Published: 2023-09-09 18:48:15</p>
			</div>
		</a></div>
	<div data-sr-id="283"
		style="visibility: visible; opacity: 1; transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.3s;"><a
			href="/my-blogs/95d76166641c">
			<div
				class=" duration-200 h-full overflow-hidden group px-2 py-2 rounded-t hover:bg-block  hover:text-green-500 border-l-4 border-transparent hover:border-green-500">
				<h1 class="text-base mb-1 tracking-wider">Some Python shortcuts</h1>
				<p class="flex flex-wrap gap-2 items-center">
					<span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">python</span>
				</p>
				<p class="text-[10px] text-gray-600 dark:text-gray-300 mt-2">Published: 2023-06-10 17:53:07</p>
			</div>
		</a></div>
		<div data-sr-id="284"
		style="visibility: visible; opacity: 1; transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.3s;"><a
			href="/my-blogs/95d76166641c">
			<div
				class=" duration-200 h-full overflow-hidden group px-2 py-2 rounded-t hover:bg-block  hover:text-green-500 border-l-4 border-transparent hover:border-green-500">
				<h1 class="text-base mb-1 tracking-wider">Some Python shortcuts</h1>
				<p class="flex flex-wrap gap-2 items-center">
					<span class="px-3 my-1 text-xs bg-green-500 bg-opacity-[0.09] rounded-full text-gray-900 dark:text-gray-100 group-hover:bg-opacity-[0.2] ">python</span>
				</p>
				<p class="text-[10px] text-gray-600 dark:text-gray-300 mt-2">Published: 2023-06-10 17:53:07</p>
			</div>
		</a></div>
</div>
</div>

Related Examples

Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

9 months ago

1k
Profile Card
Simple and Attractive Profile card in tailwind css

KULDEEP

1 year ago

1.1k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

4.8k
Product review card

Moriba Traore

3 years ago

15.8k
card
Tarjeta descriptiva

Raul antonio de la cruz hernandez

11 months ago

662
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Nick Girga

1 year ago

1.2k
Card
amazing card

Cristian

2 years ago

2.5k
KPI Cards
estilo Shopify / Stripe

Raul antonio de la cruz hernandez

11 months ago

571
Product features cards

Henrik R.

2 years ago

4.9k
Trending Creators
Trending Creators

Omer fils ELENGA

3 weeks ago

10
Simple Card with Image
Horizontal card

Prem..

4 years ago

10.1k