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.3k

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

Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

5 months ago

796
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

9 months ago

2.2k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

6 months ago

1.4k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

4.7k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

6 months ago

1.3k
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

8 months ago

1.2k
Info card

Author:
Samuel Dawson

2 years ago

9.8k
Best incamas to date

Author:
ORGIN_DREAMS

2 months ago

410
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

5 months ago

528
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

6 months ago

1k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

5 months ago

780
cards
cards with background animation

Author:
Anonymous

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components