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

Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.5k
Form
form

Author:
Aman kumar

1 year ago

2.1k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.8k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

9 months ago

708
Responsive Article Section

Author:
Prashant

3 years ago

16.7k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

18.8k
card

Author:
Raul antonio de la cruz hernandez

1 month ago

49
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

Author:
shrenik khule

3 weeks ago

231
component

Author:
pablitodgb

8 months ago

1.1k
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.6k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

286
Battery and signal
Battery and signal bar component

Author:
ardianhu

1 year ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components