Home
Shariar Hasan
Card Component

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 CSS v3. It is responsive. It supports dark mode.

Card

Author Shariar Hasan

3.5k

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

home
html , css

Author:
Hacker Development

8 months ago

1.8k
Form package

Author:
Hunter Guru

1 year ago

2.6k
Confirmation model

Author:
Mr Robot

3 years ago

13.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

3 years ago

13.8k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.7k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.3k
Article card

Author:
Sienna

3 years ago

12.8k
Shopping Cart -Card

Author:
ABDO-SY

10 months ago

1.6k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

8 months ago

1.3k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.8k
Best incamas to date

Author:
ORGIN_DREAMS

8 months ago

878

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components