Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to Build a Card component using Tailwind CSS?

HTML Web Development Front End Technology

The card component is a versatile UI element in Tailwind CSS used to display content in a structured, visually appealing format. Cards are essential building blocks for modern websites, especially e-commerce platforms, blogs, portfolios, and dashboards. Tailwind CSS provides utility classes that make creating responsive, customizable cards straightforward and efficient.

Syntax

Following is the basic syntax for creating a card component using Tailwind CSS 

<div class="bg-white rounded-lg shadow-lg p-6">
   <!-- Card content goes here -->
</div>

The core classes used are

  • bg-white Sets white background color

  • rounded-lg Applies rounded corners

  • shadow-lg Adds drop shadow effect

  • p-6 Adds padding on all sides

Creating a Single Card Component

A single card typically contains an image, title, description, and optional action buttons. The card structure uses flexbox utilities for responsive layout and proper spacing between elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
   <title>Single Card Component</title>
</head>
<body class="bg-gray-100 p-8">
   <div class="max-w-sm mx-auto">
      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
         <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Card Image">
         <div class="p-6">
            <h2 class="text-sm text-gray-600 uppercase tracking-wide">TUTORIALS POINT</h2>
            <h1 class="text-xl font-bold text-gray-900 mt-2">Learn Web Development</h1>
            <p class="text-gray-600 mt-3">
               Master modern web development with comprehensive tutorials covering HTML, CSS, JavaScript, and popular frameworks.
            </p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-4 transition duration-200">
               Get Started
            </button>
         </div>
      </div>
   </div>
</body>
</html>

The output displays a clean, professional card with an image, title, description, and action button 

[Card with placeholder image, "TUTORIALS POINT" subtitle, "Learn Web Development" title, description text, and blue "Get Started" button]
Image Area TUTORIALS POINT Learn Web Development Master modern web development... Get Started

Creating Multiple Card Components

Multiple cards are typically arranged using Flexbox or CSS Grid utilities. The grid system in Tailwind CSS provides responsive layouts that automatically adjust based on screen size.

Example Three Card Layout

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
   <title>Multiple Cards Layout</title>
</head>
<body class="bg-gray-100 p-8">
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
      <!-- Card 1 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
         <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200/3b82f6/white" alt="Frontend Development">
         <div class="p-6">
            <h2 class="text-sm text-blue-600 font-medium uppercase tracking-wide">FRONTEND</h2>
            <h1 class="text-xl font-bold text-gray-900 mt-2">HTML & CSS</h1>
            <p class="text-gray-600 mt-3">
               Learn the fundamentals of web development with HTML5 and CSS3. Build responsive, accessible websites from scratch.
            </p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-4 transition duration-200">
               Start Learning
            </button>
         </div>
      </div>
      
      <!-- Card 2 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
         <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200/10b981/white" alt="JavaScript">
         <div class="p-6">
            <h2 class="text-sm text-green-600 font-medium uppercase tracking-wide">PROGRAMMING</h2>
            <h1 class="text-xl font-bold text-gray-900 mt-2">JavaScript</h1>
            <p class="text-gray-600 mt-3">
               Master JavaScript programming with interactive examples. Learn ES6+ features, DOM manipulation, and async programming.
            </p>
            <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded mt-4 transition duration-200">
               Explore Now
            </button>
         </div>
      </div>
      
      <!-- Card 3 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
         <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200/8b5cf6/white" alt="React Framework">
         <div class="p-6">
            <h2 class="text-sm text-purple-600 font-medium uppercase tracking-wide">FRAMEWORK</h2>
            <h1 class="text-xl font-bold text-gray-900 mt-2">React.js</h1>
            <p class="text-gray-600 mt-3">
               Build dynamic user interfaces with React. Learn components, state management, hooks, and modern React patterns.
            </p>
            <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded mt-4 transition duration-200">
               Get Started
            </button>
         </div>
      </div>
   </div>
</body>
</html>

The output displays three cards in a responsive grid layout. On large screens, all three cards appear side-by-side, while on smaller screens, they stack vertically 

[Three cards displayed horizontally on desktop, showing Frontend/HTML&CSS, Programming/JavaScript, and Framework/React.js cards with different colored themes and hover effects]

Key Card Styling Classes

Following are the essential Tailwind CSS classes commonly used in card components

Category Classes Purpose
Background bg-white, bg-gray-50 Sets card background color
Borders rounded-lg, rounded-xl Adds rounded corners
Shadows shadow-lg, shadow-xl, hover:shadow-xl Creates depth and hover effects
Spacing p-6, m-4, gap-6 Controls padding, margin, and grid gaps
Layout grid, grid-cols-3, flex Arranges multiple cards
Responsive md:grid-cols-2, lg:grid-cols-3 Responsive breakpoint behavior

Card Component with Image Overlay

For more advanced designs, cards can feature overlaid content on top of background images, commonly used in hero sections or feature highlights.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
   <title>Card with Overlay</title>
</head>
<body class="bg-gray-100 p-8">
   <div class="max-w-lg mx-auto">
      <div class="relative bg-cover bg-center h-64 rounded-lg overflow-hidden" style="background-image: url('https://via.placeholder.com/600x400/1f2937/white');">
         <div class="absolute inset-0 bg-black bg-opacity-50"></div>
         <div class="relative p-6 h-full flex flex-col justify-end text-white">
            <h2 class="text-sm uppercase tracking-wide opacity-75">FEATURED COURSE</h2>
            <h1 class="text-2xl font-bold mt-1">Full-Stack Development</h1>
            <p class="mt-2 opacity-90">
               Complete web development bootcamp covering frontend, backend, and database technologies.
            </p>
            <button class="bg-white text-gray-900 py-2 px-4 rounded mt-4 font-medium hover:bg-gray-100 transition duration-200 self-start">
               Enroll Now
            </button>
         </div>
      </div>
   </div>
</body>
</html>

This creates an attractive card with text overlaid on a background image, perfect for hero sections or promotional content.

Responsive Card Layout

Tailwind CSS provides responsive utilities that automatically adjust card layouts across different screen sizes. The grid system ensures optimal viewing on mobile, tablet, and desktop devices.

  • grid-cols-1 Single column on mobile devices

  • md:grid-cols-2 Two columns on medium screens (tablets)

  • lg:grid-cols-3 Three columns on large screens (desktops)

  • gap-6 Consistent spacing between cards

Conclusion

Tailwind CSS makes creating card components efficient through its utility-first approach. Cards can range from simple content containers to complex layouts with images, overlays, and interactive elements. The responsive grid system ensures

Updated on: 2026-03-16T21:38:54+05:30

958 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements