Components
Tailwind CSS Cards - Madhuranjan UI
Discover a variety of card designs built with Tailwind CSS. Whether it's a simple layout, an image-focused design, or an e-commerce product showcase, each card is fully responsive, supports dark/light modes, and is optimized for modern web applications.
Simple Tailwind Card
Use this lightweight, minimal card as a starting point for displaying quick highlights or essential content. Its clean design ensures seamless integration in any project.
Card Title
This is a simple card with a title and description using Tailwind CSS.
1<div class="bg-white dark:bg-gray-900 shadow-lg rounded-sm p-6 max-w-sm">
2 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Card Title</h3>
3 <p class="text-gray-600 dark:text-gray-300 mt-2">
4 This is a simple card with a title and description using Tailwind CSS.
5 </p>
6</div>
7Card with Icons and Button
Elevate your user experience with a card that includes interactive icons and a clear call-to-action button. Perfect for highlighting features, offers, or important alerts.
Professional Card
This is a beautifully designed professional card with a smooth hover effect.
Elegant Card
This card has a modern look with an engaging hover effect and dark mode support.
Read More →1<div class="flex flex-col md:flex-row gap-6 p-6 bg-gray-100 dark:bg-gray-800 min-h-screen justify-center items-center">
2
3 <!-- Card 1: Title, Description, and Button -->
4 <div class="bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-6 max-w-sm transition-transform transform hover:scale-105 hover:shadow-xl">
5 <div class="flex items-center space-x-3">
6 <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
7 <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m2 0h-1m2 0h.01M12 20.5c4.142 0 7.5-3.358 7.5-7.5S16.142 5.5 12 5.5 4.5 8.858 4.5 13s3.358 7.5 7.5 7.5z"></path>
8 </svg>
9 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Professional Card</h3>
10 </div>Card with Image
Show off your images in a sleek layout. This design is ideal for product listings, portfolio items, or blog posts where visuals need to stand out.
Latest Innovations in AI 2025
Explore the groundbreaking advancements in artificial intelligence that are shaping the future.
Breaking: Web 3.0 Revolution
Discover how Web 3.0 is changing the way we interact with the internet, from decentralization to blockchain.
Read More →1<div class="flex flex-col md:flex-row gap-6 p-6 bg-gray-100 dark:bg-gray-800 min-h-screen justify-center items-center">
2
3 <!-- Modern News/Article Card with Button -->
4 <div class="max-w-md bg-gray-900 text-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-transform transform hover:scale-105">
5 <img src="https://via.placeholder.com/400" alt="Tech News" class="w-full h-56 object-cover">
6 <div class="p-6">
7 <h3 class="text-2xl font-bold">Latest Innovations in AI 2025</h3>
8 <p class="mt-2 text-gray-300">Explore the groundbreaking advancements in artificial intelligence that are shaping the future.</p>
9 <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-600 transition">
10 Learn More →Horizontal Card with Image
Need a wider format? This horizontal design is great for articles or product spotlights, offering more space for text alongside a prominent image.
The Future of AI
Artificial intelligence is transforming industries by automating processes and reshaping human interactions with technology.
The Power of Blockchain
Decentralization and blockchain technology are revolutionizing digital security, finance, and data transparency.
Read More →1<div class="flex flex-col gap-6 p-6 bg-gray-100 dark:bg-gray-900 min-h-screen justify-center items-center">
2
3 <!-- Horizontal Card 1: Image on Left, SVG Icon in Title, Button -->
4 <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden max-w-3xl w-full">
5 <img src="https://cdn.pixabay.com/photo/2023/04/07/09/58/artificial-intelligence-7906197_1280.jpg"
6 alt="AI Technology" class="w-full md:w-1/2 h-64 object-cover">
7 <div class="p-6 flex flex-col justify-center">
8 <h3 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
9 <svg class="w-6 h-6 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
10 <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m2 0h-1m2 0h.01M12 20.5c4.142 0 7.5-3.358 7.5-7.5S16.142 5.5 12 5.5 4.5 8.858 4.5 13s3.358 7.5 7.5 7.5z"></path>All Side Border Card
Create visual impact with a bordered card design. This layout is perfect for showcasing content blocks with a neat, outlined structure.
Top Border Card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae voluptas iusto itaque.
Card link →Bottom Border Card
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore, consequuntur.
Card link →Right Border card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, soluta!.
Card link →1<div class="grid grid-cols-1 items-center justify-center gap-6 bg-gray-100 p-6 sm:grid-cols-2 lg:grid-cols-2 dark:bg-gray-900">
2 <!-- Card 1: Top Border -->
3 <div class="rounded-xl border-t-4 border-violet-500 bg-white p-6 text-gray-900 shadow-lg dark:border-blue-500 dark:bg-gray-800 dark:text-white">
4 <h3 class="text-lg font-bold">Top Border Card</h3>
5 <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae voluptas iusto itaque.</p>
6 <a href="#" class="mt-4 inline-block font-medium text-violet-500 transition hover:text-violet-600 dark:text-blue-500 dark:hover:text-blue-400"> Card link → </a>
7 </div>
8
9 <!-- Card 2: Bottom Border -->
10 <div class="rounded-xl border-b-4 border-violet-500 bg-white p-6 text-gray-900 shadow-lg dark:border-blue-500 dark:bg-gray-800 dark:text-white">Author Card
Highlight an author or creator with a personal touch. This card includes space for a photo, brief bio, and social links—ideal for blog posts or team profiles.
1<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105">
2 <!-- Profile Photo -->
3 <div class="flex justify-center mt-6">
4 <img class="w-24 h-24 rounded-full border-4 border-violet-500 dark:border-blue-500 object-cover"
5 src="https://via.placeholder.com/150" alt="Author Profile Photo">
6 </div>
7
8 <!-- Author Details -->
9 <div class="p-6 text-center">
10 <!-- Name -->To-Do List Card
Organize tasks in a concise layout. This card keeps your checklist clear and approachable, making it effortless to manage personal or team tasks.
To-Do List
Tasks to complete today
- Complete project proposal
- Review team updates
- Prepare for client meeting
- Send weekly report
1<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105">
2 <!-- Card Header -->
3 <div class="p-6 border-b border-gray-200 dark:border-gray-700">
4 <h2 class="text-2xl font-bold text-gray-900 dark:text-white">To-Do List</h2>
5 <p class="text-sm text-violet-600 dark:text-blue-400 mt-1">Tasks to complete today</p>
6 </div>
7
8 <!-- List Items -->
9 <div class="p-6">
10 <ul class="space-y-4">Card List with Image
Showcase multiple items or features in a list-style layout with accompanying images. A great solution for product categories, features, or portfolio highlights.
Recent Customers
View allNeil Sims
$320
Bonnie Green
$3,467
Michael Gough
$67
Lana Byrd
$367
Thomas Lean
$2,367
1<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
2 <!-- Card Header -->
3 <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
4 <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Recent Customers</h3>
5 <a href="#" class="text-violet-500 dark:text-blue-500 text-sm font-medium hover:underline">View all</a>
6 </div>
7
8 <!-- Customer List -->
9 <ul class="divide-y divide-gray-200 dark:divide-gray-700">
10 Pricing Table Card
Present different pricing tiers or subscription plans using a clear, concise card format. Help users quickly compare features and choose their plan.
Basic Plan
Perfect for getting started
$09/ student
per month
- ✓Consectetur adipiscing elit
- ✓Sed do eiusmod tempor
- ✓Incididunt dolore magna aliqua
- ✓Ut enim ad minim veniam
- ✓Quis nostrud exercitation
Sprint Plan
€3,490/mo
Pause or cancel anytime • 7-day money-back guarantee
- ✓Two-week design sprint
- ✓Unlimited requests & revisions
- ✓Up to 1 meeting per week
- ✓Avg. 2-3 days delivery
- ✓Dev-ready Figma files
- ✓Slack Collaboration
Entry Plan
€90.75/month
Includes 5 team member seats • Additional seats at €9.00/mo
- ✓5 Users included
- ✓Up to 30 user seats
- ✓1 Space included
- ✓Activity Log
- ✓Custom Roles
1<div class="flex flex-wrap gap-3 py-6 px-3 ">
2
3 <!-- ===== FIRST REFERENCE: SINGLE PLAN (BASIC) ===== -->
4<div class="mx-auto max-w-sm transform overflow-hidden rounded-xl bg-white shadow-2xl transition-all duration-300 dark:bg-gray-800">
5 <!-- Top colored bar + icon/title -->
6 <div class="bg-gradient-to-r from-pink-600 to-purple-600 px-6 py-3 text-center">
7 <h3 class="text-2xl font-bold tracking-wide text-white">Basic Plan</h3>
8 <p class="mt-1 text-sm text-pink-200">Perfect for getting started</p>
9 </div>
10Stats Card
Display important numbers or metrics in an engaging design. Perfect for analytics dashboards, performance overviews, or quick data insights.
50K+
Active Users
120M+
Monthly Requests
10K+
Business Partners
250+
Team Members
5M+
API Integrations
99.9%
Uptime Guarantee
1<div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
2 <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-6 text-center">
3
4 <!-- Stat Item 1 -->
5 <div class="transition-all duration-300 transform hover:scale-105">
6 <h2 class="text-3xl font-extrabold text-violet-500 dark:text-blue-500">50K+</h2>
7 <p class="text-gray-600 dark:text-gray-300 text-sm">Active Users</p>
8 </div>
9
10 <!-- Stat Item 2 -->Blog Post Card
Feature articles or blog entries with a strong visual. A neat excerpt format makes it easy for readers to get a quick overview before diving in.
The Future of AI in Web Development
Artificial intelligence is transforming the way we build and interact with websites. Learn how AI tools are shaping the future of web development.
John Doe
August 18, 2023
1<div class="max-w-sm md:max-w-md mx-auto bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden transform transition-all duration-300 ">
2 <!-- Featured Image -->
3 <img
4 src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
5 alt="Blog Featured Image"
6 class="w-full h-48 object-cover"
7 />
8
9 <!-- Blog Content -->
10 <div class="p-6">Card with Warning
Draw attention to critical notifications or alerts. This card style uses distinctive color schemes to ensure warnings stand out.
🌐Custom CMS for Startups
Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.
Learn More →1<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
2 <!-- Alert Bar -->
3 <div class="relative bg-gradient-to-r from-red-500 to-pink-500 text-white px-6 py-3 flex items-center justify-between">
4 <div class="flex items-center space-x-3">
5 <span class="text-xl">🔔</span>
6 <span class="text-sm font-medium">Please update your card details.</span>
7 </div>
8 <input type="checkbox" id="close-alert" class="peer hidden">
9 <label for="close-alert" class="cursor-pointer text-white text-xl hover:text-red-200 transition-colors">✕</label>
10 </div>E-commerce Cart
A must-have for online stores. Display product details, images, and prices in a user-friendly layout that encourages quick purchases.
Apple iMac 27", 1TB HDD, Retina 5K Display, M3 Max
1<div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-xl shadow-lg w-80 mx-auto">
2 <div class="bg-gray-300 dark:bg-gray-700 rounded-lg h-40 flex items-center justify-center">
3 <svg class="h-24 w-24 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
4 <rect width="20" height="14" x="2" y="5" rx="2"></rect>
5 <rect width="6" height="2" x="9" y="18" rx="1"></rect>
6 </svg>
7 </div>
8 <div class="mt-4">
9 <span class="bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-md">Up to 35% off</span>
10 </div>iPhone Cart
Specifically designed for a sleek product display, this layout emphasizes brand styling, multiple color options, and an intuitive quantity picker.
Apple iPhone 15 Pro Max
1<div class="mx-auto w-full max-w-2xl rounded-xl bg-gray-100 p-4 shadow-lg dark:bg-gray-900">
2 <div class="flex flex-col items-center space-y-6 sm:flex-row sm:items-start sm:space-y-0 sm:space-x-6">
3 <!-- Product Image Placeholder -->
4 <div class="flex h-52 w-full items-center justify-center rounded-lg bg-gray-300 sm:w-40 dark:bg-gray-700">
5 <svg class="h-44 w-44 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
6 <rect width="12" height="20" x="6" y="2" rx="3"></rect>
7 <circle cx="12" cy="18" r="1"></circle>
8 </svg>
9 </div>
10 <!-- Product Details -->Vertical E-commerce Card
Highlight products in a vertical arrangement, allowing more space for product images, specifications, and calls to action.
PlayStation®5 Console – 1TB, PRO Controller
1<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-sm shadow-md w-full max-w-xs mx-auto">
2 <!-- Product Image -->
3 <div class="flex justify-center">
4 <div class="bg-gray-300 dark:bg-gray-700 rounded-lg w-36 h-48 flex items-center justify-center">
5 <svg class="h-32 w-12 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
6 <path d="M8 2h8v20H8zM10 5h4v14h-4z"></path>
7 </svg>
8 </div>
9 </div>
10 Simple Product Card
A concise product layout that keeps key details front and center. Ideal for minimalistic shops or quick product teasers.
Product Title
This is a short description of the product. It highlights the key features and benefits.
1<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-full max-w-sm mx-auto p-4">
2 <!-- Product Image -->
3 <div class="relative">
4 <img src="https://via.placeholder.com/400x300" alt="Product Image" class="w-full h-48 object-contain rounded-md">
5 <!-- Wishlist Button -->
6 <label class="absolute top-2 right-2 p-2 bg-white dark:bg-gray-700 rounded-full shadow-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition">
7 <input type="checkbox" class="hidden peer">
8 <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 peer-checked:fill-red-500 peer-checked:stroke-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
9 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
10 d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">User Review Card
Showcase customer testimonials in an elegant, trust-building design. Features a user photo, rating, and feedback text to enhance credibility.
John Doe
Software Engineer
"The product quality is amazing! I am really impressed with the design and durability."
1<div class="max-w-sm w-full mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
2 <!-- User Profile -->
3 <div class="flex items-center space-x-4">
4 <img src="https://via.placeholder.com/50" alt="User Profile" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-600">
5 <div>
6 <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
7 <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
8 </div>
9 </div>
10