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

Product review card

Author:
Moriba Traore

3 years ago

15.4k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.6k
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

1 month ago

335
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

4 months ago

516
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

8 months ago

983
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

9 months ago

741
Portfolio form
Portfolio form

Author:
Joseph Melvin Kanu

1 year ago

3.1k
image

Author:
pablitodgb

7 months ago

455
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

3 years ago

17.6k
Card animate

Author:
Raul antonio de la cruz hernandez

1 year ago

1.2k
Responsive card with image

Author:
Simon Scheffer

3 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components