Tailwind CSS Cards Collection

These custom Tailwind CSS cards deliver clean, responsive designs for modern web interfaces. Built with Tailwind's utility-first approach, they blend minimalist styling with practical functionality.

Perfect for product displays, user profiles, pricing tables, or feature showcases. The cards maintain a cohesive design language while offering enough customization options to fit your brand. Simply drop them into your project and adjust the utility classes to match your design system.

39 componentsTailwind CSS v3.4Free to useUpdated September 29, 2026

Basic Content Card

Card Title

This is a basic card component. It's useful for displaying simple information or acting as a container for other elements. Use it as a starting point.

<!-- Basic Content Card -->
<div class="max-w-sm bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
  <p class="text-gray-600 text-sm">
    This is a basic card component. It's useful for displaying simple information or acting as a container for other elements. Use it as a starting point.
  </p>
</div>

Image Card

Image Card Title

This card features an image at the top, followed by content. Great for visual previews.

Learn More

<!-- Image Card -->
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Placeholder Image">
  <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Image Card Title</h3>
      <p class="text-gray-600 text-sm mb-4">
        This card features an image at the top, followed by content. Great for visual previews.
      </p>
      <a href="#" class="inline-block bg-blue-500 text-white text-sm px-4 py-2 rounded hover:bg-blue-600 transition duration-200">Learn More</a>
  </div>
</div>

Media Card (Image/Video/Audio)

Media Card Title

This card is designed to hold various media types like images, videos, or audio players.

<!-- Media Card (Image Example) -->
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
  <!-- Image Example -->
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Media Placeholder">

  <!-- Placeholder for Video/Audio/SVG (Replace img above) -->
  <!--
  <div class="bg-gray-200 h-48 flex items-center justify-center text-gray-500">
    <!-- Replace with <video controls>, or <audio controls> element or an SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
     <!-- Or a video: <video class="w-full h-48" controls src="your_video.mp4">Your browser does not support the video tag.</video> -->
     <!-- Or audio: <audio class="w-full mt-4" controls src="your_audio.mp3">Your browser does not support the audio element.</audio> -->
  </div>
  -->

  <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Media Card Title</h3>
      <p class="text-gray-600 text-sm">
          This card is designed to hold various media types like images, videos, or audio players.
      </p>
  </div>
</div>

Profile/User Card

Jane Doe

Software Engineer

Passionate about creating intuitive user experiences and clean code. Coffee enthusiast.

<!-- Profile/User Card -->
<div class="max-w-xs bg-white rounded-lg shadow-md p-6 text-center">
  <img class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" src="https://picsum.photos/150/150" alt="User Avatar">
  <h3 class="text-lg font-semibold text-gray-800">Jane Doe</h3>
  <p class="text-sm text-gray-500 mb-3">Software Engineer</p>
  <p class="text-gray-600 text-sm mb-4">
      Passionate about creating intuitive user experiences and clean code. Coffee enthusiast.
  </p>
  <button class="w-full bg-blue-500 text-white text-sm px-4 py-2 rounded hover:bg-blue-600 transition duration-200">View Profile</button>
</div>

Product Card

Awesome Gadget

Category: Electronics

The latest and greatest gadget you never knew you needed. Features include X, Y, and Z.

$99.99

<!-- Product Card -->
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-56 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
  <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-1">Awesome Gadget</h3>
      <p class="text-sm text-gray-500 mb-2">Category: Electronics</p>
      <p class="text-gray-700 text-sm mb-3">
          The latest and greatest gadget you never knew you needed. Features include X, Y, and Z.
      </p>
        <div class="flex items-center justify-between">
            <span class="text-xl font-bold text-gray-900">$99.99</span>
            <button class="bg-green-500 text-white text-xs font-semibold px-3 py-2 rounded hover:bg-green-600 transition duration-200 flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
                Add to Cart
            </button>
        </div>
  </div>
</div>

Pricing Card

Basic Plan

For individuals

$9/mo

Feature One
Feature Two
Feature Three

Testimonial Card

"This product has completely changed the way we work. It's intuitive, powerful, and the support team is incredibly responsive. Highly recommended!"

Alex Johnson

CEO, Tech Solutions Inc.

<!-- Testimonial Card -->
<div class="max-w-md bg-white rounded-lg shadow-md p-6">
  <div class="flex items-start space-x-4">
      <img class="w-12 h-12 rounded-full object-cover flex-shrink-0" src="https://picsum.photos/100/100" alt="Author Avatar">
      <div>
          <p class="text-gray-600 italic mb-3">"This product has completely changed the way we work. It's intuitive, powerful, and the support team is incredibly responsive. Highly recommended!"</p>
          <p class="text-sm font-semibold text-gray-800">Alex Johnson</p>
          <p class="text-xs text-gray-500">CEO, Tech Solutions Inc.</p>
      </div>
  </div>
</div>

Blog Post Card

Technology July 20, 2024

The Future of Web Development with Tailwind CSS

Explore the latest trends and techniques in web development, focusing on how utility-first CSS frameworks like Tailwind are shaping the future...

Sarah Chen

<!-- Blog Post Card -->
<div class="max-w-md bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=3" alt="Blog Post Image">
  <div class="p-6">
      <div class="mb-3">
          <span class="inline-block bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full mr-2">Technology</span>
          <span class="text-sm text-gray-500">July 20, 2024</span>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 mb-2 hover:text-blue-600 transition duration-200"><a href="#">The Future of Web Development with Tailwind CSS</a></h3>
      <p class="text-gray-600 text-sm mb-4">
          Explore the latest trends and techniques in web development, focusing on how utility-first CSS frameworks like Tailwind are shaping the future...
      </p>
      <div class="flex items-center justify-between">
          <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover" src="https://picsum.photos/50/50" alt="Author Avatar">
              <span class="text-sm font-medium text-gray-700">Sarah Chen</span>
          </div>
          <a href="#" class="text-sm text-blue-500 hover:underline">Read More &rarr;</a>
      </div>
  </div>
</div>

Article/News Card

World News

Global Markets React to Recent Economic Data

Major stock indices saw significant movement today following the release of the quarterly economic report...

Published by Global Press • 2 hours ago

<!-- Article/News Card (Horizontal Layout Example) -->
<div class="max-w-lg bg-white rounded-lg shadow-md overflow-hidden flex">
  <!-- Image visible on small screens and up -->
  <img class="w-1/3 h-auto object-cover hidden sm:block" src="https://picsum.photos/300/400?random=4" alt="Article Image">
  <div class="p-6 flex flex-col justify-between">
      <div>
          <span class="text-xs font-semibold text-red-600 uppercase tracking-wide">World News</span>
          <h3 class="text-lg font-semibold text-gray-800 mt-1 mb-2 hover:text-blue-600 transition duration-200"><a href="#">Global Markets React to Recent Economic Data</a></h3>
          <p class="text-gray-600 text-sm mb-3">
              Major stock indices saw significant movement today following the release of the quarterly economic report...
          </p>
      </div>
      <div class="text-xs text-gray-500 mt-auto">
            Published by <span class="font-medium">Global Press</span> &bull; 2 hours ago
          </div>
  </div>
</div>

Event Card

Aug 15 2024

Tech Conference 2024

Grand Convention Center

Join industry leaders for talks on AI, Cloud, and more. Networking opportunities available.

Learn More →

<!-- Event Card -->
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden flex">
  <div class="w-1/4 bg-blue-500 text-white p-4 flex flex-col items-center justify-center text-center">
      <span class="text-xs uppercase font-semibold">Aug</span>
      <span class="text-3xl font-bold">15</span>
      <span class="text-xs">2024</span>
  </div>
  <div class="w-3/4 p-4">
      <h3 class="text-md font-semibold text-gray-800 mb-1">Tech Conference 2024</h3>
        <p class="text-xs text-gray-500 mb-2 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
            Grand Convention Center
        </p>
      <p class="text-gray-600 text-sm mb-3">
          Join industry leaders for talks on AI, Cloud, and more. Networking opportunities available.
      </p>
      <a href="#" class="text-sm text-blue-500 hover:underline">Learn More &rarr;</a>
  </div>
</div>

Notification Card

Informational Message

Your profile has been updated successfully.

Success!

Your order has been placed.

Warning

Your trial period ends in 3 days.

Error

Failed to upload the document. Please try again.

<!-- Notification Card - Info -->
<div class="max-w-md w-full bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-md shadow-sm flex items-start space-x-3" role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div>
        <p class="font-bold">Informational Message</p>
        <p class="text-sm">Your profile has been updated successfully.</p>
    </div>
</div>

<!-- Notification Card - Success -->
<div class="max-w-md w-full bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md shadow-sm flex items-start space-x-3" role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div>
        <p class="font-bold">Success!</p>
        <p class="text-sm">Your order has been placed.</p>
    </div>
</div>

<!-- Notification Card - Warning -->
<div class="max-w-md w-full bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-md shadow-sm flex items-start space-x-3" role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <div>
        <p class="font-bold">Warning</p>
        <p class="text-sm">Your trial period ends in 3 days.</p>
    </div>
</div>

<!-- Notification Card - Error -->
<div class="max-w-md w-full bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md shadow-sm flex items-start space-x-3" role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div>
        <p class="font-bold">Error</p>
        <p class="text-sm">Failed to upload the document. Please try again.</p>
    </div>
</div>

Statistic Card

Total Users

10,482

Revenue

$1.2M

<!-- Container for Statistic Cards (Example using flex) -->
<div class="flex flex-wrap justify-center gap-6">

  <!-- Statistic Card - Simple -->
  <div class="max-w-xs w-full bg-white rounded-lg shadow-md p-6 text-center">
      <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Users</p>
      <p class="text-4xl font-bold text-gray-900 mt-2">10,482</p>
  </div>

  <!-- Statistic Card - With Icon -->
  <div class="max-w-xs w-full bg-white rounded-lg shadow-md p-6 flex items-center space-x-4">
      <div class="p-3 rounded-full bg-green-100 text-green-600">
        <!-- Heroicon - cash -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </div>
      <div>
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Revenue</p>
          <p class="text-2xl font-bold text-gray-900 mt-1">$1.2M</p>
      </div>
  </div>

</div>

Metric/KPI Card

Conversion Rate

5.2%

3.8%

vs last month

Bounce Rate

-1.5%

45.1%

vs last month

<!-- Container for KPI Cards (Example using flex) -->
<div class="flex flex-wrap justify-center gap-6">

  <!-- Metric/KPI Card - Increase -->
  <div class="max-w-xs w-full bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center justify-between mb-1">
        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Conversion Rate</p>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
            <!-- Heroicon - trending-up (Visually represented by a rotated down arrow) -->
            <svg class="-ml-0.5 mr-0.5 h-4 w-4 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path> </svg>
            5.2%
          </span>
    </div>
    <p class="text-3xl font-bold text-gray-900">3.8%</p>
    <p class="text-xs text-gray-500 mt-1">vs last month</p>
  </div>

  <!-- Metric/KPI Card - Decrease -->
  <div class="max-w-xs w-full bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center justify-between mb-1">
        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</p>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
            <!-- Heroicon - trending-down (Visually represented by a down arrow) -->
            <svg class="-ml-0.5 mr-0.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path> </svg>
            -1.5%
          </span>
    </div>
    <p class="text-3xl font-bold text-gray-900">45.1%</p>
    <p class="text-xs text-gray-500 mt-1">vs last month</p>
  </div>

</div>

Chart/Data Visualization Card

Monthly Sales Trend

Chart Area Placeholder

Data visualization powered by your favorite charting library.

<!-- Chart/Data Visualization Card -->
<div class="max-w-lg w-full bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Monthly Sales Trend</h3>
  <!-- Container for your chart library (e.g., Chart.js canvas) -->
  <div class="bg-gray-200 h-64 rounded flex items-center justify-center text-gray-500">
      <!-- Example Placeholder SVG Icon -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
      </svg>
      <span class="ml-2">Chart Area Placeholder</span>
      <!-- e.g., <canvas id="myChart"></canvas> -->
    </div>
    <p class="text-xs text-gray-500 mt-3 text-center">Data visualization powered by your favorite charting library.</p>
</div>

Feature Highlight Card

Mobile Optimized

Fully responsive design ensures your content looks great on any device, from desktops to smartphones.

<!-- Feature Highlight Card -->
<div class="max-w-sm bg-white rounded-lg shadow-md p-6 text-center transition-shadow duration-300 hover:shadow-xl">
    <div class="inline-flex items-center justify-center p-3 rounded-full bg-purple-100 text-purple-600 mb-4">
      <!-- Heroicon - device-mobile -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
      </svg>
    </div>
    <h3 class="text-lg font-semibold text-gray-800 mb-2">Mobile Optimized</h3>
    <p class="text-gray-600 text-sm">
        Fully responsive design ensures your content looks great on any device, from desktops to smartphones.
    </p>
</div>

Service Card

Web Development

Crafting responsive and performant websites tailored to your needs.

<!-- Service Card -->
<div class='bg-white p-6 rounded-lg shadow-lg w-full max-w-sm'>
  <div class='flex items-center justify-center mb-4 text-blue-500'>
    <svg xmlns='http://www.w3.org/2000/svg' class='h-12 w-12' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
      <path stroke-linecap='round' stroke-linejoin='round' d='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' />
    </svg>
  </div>
  <h3 class='text-xl font-semibold text-gray-800 mb-2 text-center'>Web Development</h3>
  <p class='text-gray-600 text-center'>Crafting responsive and performant websites tailored to your needs.</p>
</div>

Team Member Card

Jane Doe

Lead Designer

<!-- Team Member Card -->
<div class='bg-white p-6 rounded-lg shadow-lg text-center w-full max-w-xs'>
  <img class='w-24 h-24 rounded-full mx-auto mb-4 object-cover' src='https://picsum.photos/150/150' alt='Team Member Photo'>
  <h3 class='text-xl font-semibold text-gray-800 mb-1'>Jane Doe</h3>
  <p class='text-gray-500 text-sm mb-3'>Lead Designer</p>
  <div class='flex justify-center space-x-3'>
    <a href='#' class='text-gray-400 hover:text-blue-500 transition-colors'>
      <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='currentColor' viewBox='0 0 24 24'><path d='M22.46 6c-.77.35-1.6.58-2.46.67.9-.53 1.58-1.37 1.9-2.37-.84.5-1.78.86-2.79 1.07C18.35 4.49 17.25 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.22-1.95-.54v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.01-.06C3.18 20.57 5.36 21 7.7 21 16.06 21 20.7 14.14 20.7 8.17v-.37c.88-.63 1.64-1.42 2.25-2.3z'/></svg>
    </a>
    <a href='#' class='text-gray-400 hover:text-blue-700 transition-colors'>
      <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='currentColor' viewBox='0 0 24 24'><path d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/></svg>
    </a>
  </div>
</div>

<!-- Social Media Card -->
<div class='bg-white p-4 rounded-lg shadow-lg w-full max-w-md'>
  <div class='flex items-center mb-4'>
    <img class='w-10 h-10 rounded-full mr-3 object-cover' src='https://picsum.photos/50/50' alt='User Avatar'>
    <div>
      <p class='font-semibold text-gray-800'>Alice Wonderland</p>
      <p class='text-xs text-gray-500'>2 hours ago</p>
    </div>
  </div>
  <p class='text-gray-700 mb-4'>
    Just enjoyed a wonderful afternoon tea party! ☕️🍰 Highly recommend the Earl Grey. #WonderlandAdventures #TeaTime
  </p>
  <img class='rounded-lg w-full object-cover mb-4 h-48' src='https://picsum.photos/600/400' alt='Post Image'>
  <div class='flex justify-between items-center text-gray-500'>
    <div class='flex space-x-4'>
      <button class='flex items-center space-x-1 hover:text-red-500 transition-colors'>
        <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'>
          <path fill-rule='evenodd' d='M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z' clip-rule='evenodd' />
        </svg>
        <span class='text-sm'>15</span>
      </button>
      <button class='flex items-center space-x-1 hover:text-blue-500 transition-colors'>
        <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'>
          <path fill-rule='evenodd' d='M18 10c0 3.866-3.582 7-8 7a8.838 8.838 0 01-3.576-.766L2 18l.756-3.424A7.966 7.966 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z' clip-rule='evenodd' />
        </svg>
        <span class='text-sm'>3</span>
      </button>
    </div>
    <button class='flex items-center space-x-1 hover:text-green-500 transition-colors'>
      <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'>
        <path d='M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z' />
      </svg>
      <span class='text-sm'>Share</span>
    </button>
  </div>
</div>

Expandable/Collapsible Card

Note: This example uses Alpine.js for the toggle functionality within the preview. The core HTML structure is provided.

This content is initially hidden and appears when the card header is clicked. Uses Alpine.js for the toggle and smooth collapse animation. You can put any content here, like longer descriptions, lists, or even other components.

<!-- Expandable/Collapsible Card (Requires Alpine.js or similar JS for functionality) -->
<div x-data='{ expanded: false }' class='bg-white rounded-lg shadow-lg w-full max-w-md overflow-hidden'>
  <button @click='expanded = !expanded' class='w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 focus:outline-none'>
    <h3 class='text-lg font-semibold text-gray-800'>Expandable Section</h3>
    <svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6 text-gray-500 transition-transform duration-300' :class='{ \"rotate-180\": expanded }' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
      <path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' />
    </svg>
  </button>
  <!-- Add collapse/transition plugin or styles for smooth animation -->
  <div x-show='expanded' x-cloak class='p-4 border-t border-gray-200'>
    <p class='text-gray-600'>
      This content is initially hidden and appears when the card header is clicked. Uses Alpine.js for the toggle and smooth collapse animation. You can put any content here, like longer descriptions, lists, or even other components.
    </p>
  </div>
</div>

Hover-Effect Card

Hover Effect Card

This card elevates and changes appearance slightly on hover using Tailwind's group-hover utility.

<!-- Hover-Effect Card -->
<div class='group bg-white p-6 rounded-lg shadow-md w-full max-w-sm transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1'>
  <img class='w-full h-40 object-cover rounded-md mb-4 transition-opacity duration-300 group-hover:opacity-80' src='https://picsum.photos/400/240' alt='Hover Effect Image'>
  <h3 class='text-xl font-semibold text-gray-800 mb-2 group-hover:text-amber-600 transition-colors'>Hover Effect Card</h3>
  <p class='text-gray-600'>This card elevates and changes appearance slightly on hover using Tailwind's group-hover utility.</p>
</div>

Interactive/Card with Actions

Project Alpha

A brief description of Project Alpha, highlighting its main goals and current status.

<!-- Interactive/Card with Actions -->
<div class='bg-white p-6 rounded-lg shadow-lg w-full max-w-sm'>
  <h3 class='text-xl font-semibold text-gray-800 mb-2'>Project Alpha</h3>
  <p class='text-gray-600 mb-4'>A brief description of Project Alpha, highlighting its main goals and current status.</p>
  <div class='flex justify-between items-center border-t border-gray-200 pt-4'>
    <div class='flex space-x-2'>
      <button class='p-2 rounded-full text-gray-500 hover:bg-gray-100 hover:text-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500'>
        <!-- Edit Icon -->
        <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'>
          <path d='M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z' />
          <path fill-rule='evenodd' d='M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' clip-rule='evenodd' />
        </svg>
      </button>
       <button class='p-2 rounded-full text-gray-500 hover:bg-gray-100 hover:text-red-600 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500'>
         <!-- Delete Icon -->
         <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'>
           <path fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z' clip-rule='evenodd' />
         </svg>
       </button>
    </div>
    <button class='px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors'>
      View Details
    </button>
  </div>
</div>

Clickable Card (as a link)

Clickable Card

The entire card acts as a single clickable link. Useful for navigation or linking to detail pages.

Learn More

<!-- Clickable Card (as a link) -->
<a href='#' class='block group bg-white p-6 rounded-lg shadow-md w-full max-w-sm transition-all duration-300 ease-in-out hover:shadow-lg hover:bg-gray-50'>
  <h3 class='text-xl font-semibold text-gray-800 mb-2 group-hover:text-blue-600 transition-colors'>Clickable Card</h3>
  <p class='text-gray-600 mb-4'>The entire card acts as a single clickable link. Useful for navigation or linking to detail pages.</p>
  <div class='flex items-center text-blue-500 group-hover:text-blue-700 transition-colors'>
    <span class='text-sm font-medium'>Learn More</span>
    <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 ml-1 transition-transform duration-200 group-hover:translate-x-1' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
      <path stroke-linecap='round' stroke-linejoin='round' d='M17 8l4 4m0 0l-4 4m4-4H3' />
    </svg>
  </div>
</a>

Draggable Card

Note: Full drag-and-drop functionality requires JavaScript implementation (e.g., using the native HTML Drag and Drop API or libraries like SortableJS). This card provides the visual styling.

Draggable Card Item

This card is visually styled to suggest it can be dragged, typically within a list or grid.

<!-- Draggable Card -->
<!-- NOTE: Actual drag & drop requires JavaScript (e.g., HTML Drag and Drop API, SortableJS). This is a visual representation. -->
<div class='relative bg-white p-6 rounded-lg shadow-lg w-full max-w-sm cursor-grab active:cursor-grabbing'>
  <div class='absolute top-2 right-2 text-gray-400' title='Draggable Handle'>
    <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
      <path stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16M4 18h16' />
    </svg>
  </div>
  <h3 class='text-xl font-semibold text-gray-800 mb-2'>Draggable Card Item</h3>
  <p class='text-gray-600'>This card is visually styled to suggest it can be dragged, typically within a list or grid.</p>
</div>

Card with Tabs

Note: This example uses Alpine.js for the tab switching functionality within the preview. The core HTML structure is provided.

Product Information

This section contains general information about the product. It provides a high-level overview and key features.

Technical Specifications

Dimension: 10cm x 5cm x 2cm
Weight: 150g
Material: Recycled Aluminum
Power Source: USB-C

Customer Reviews

\"Excellent product, exceeded expectations!\" - Reviewer One

\"Solid build quality, but the color was slightly off.\" - Reviewer Two

<!-- Card with Tabs (Requires Alpine.js or similar JS for functionality) -->
<div class='bg-white rounded-lg shadow-lg w-full max-w-md overflow-hidden' x-data='{ cardTab: \"info\" }'>
  <!-- Card Tabs -->
  <div class='flex border-b border-gray-200 bg-gray-50'>
    <button @click='cardTab = \"info\"' :class='{ \"border-b-2 border-blue-500 text-blue-600 bg-white\": cardTab === \"info\", \"text-gray-500 hover:text-gray-700 hover:bg-gray-100\": cardTab !== \"info\" }' class='flex-1 px-4 py-3 text-sm font-medium text-center focus:outline-none transition-colors duration-150'>
      Info
    </button>
    <button @click='cardTab = \"specs\"' :class='{ \"border-b-2 border-blue-500 text-blue-600 bg-white\": cardTab === \"specs\", \"text-gray-500 hover:text-gray-700 hover:bg-gray-100\": cardTab !== \"specs\" }' class='flex-1 px-4 py-3 text-sm font-medium text-center focus:outline-none transition-colors duration-150'>
      Specifications
    </button>
    <button @click='cardTab = \"reviews\"' :class='{ \"border-b-2 border-blue-500 text-blue-600 bg-white\": cardTab === \"reviews\", \"text-gray-500 hover:text-gray-700 hover:bg-gray-100\": cardTab !== \"reviews\" }' class='flex-1 px-4 py-3 text-sm font-medium text-center focus:outline-none transition-colors duration-150'>
      Reviews
    </button>
  </div>
  <!-- Tab Content -->
  <div class='p-6'>
    <div x-show='cardTab === \"info\"' x-cloak>
      <h4 class='text-lg font-semibold mb-2'>Product Information</h4>
      <p class='text-gray-600'>This section contains general information about the product. It provides a high-level overview and key features.</p>
    </div>
    <div x-show='cardTab === \"specs\"' x-cloak>
      <h4 class='text-lg font-semibold mb-2'>Technical Specifications</h4>
      <ul class='list-disc list-inside text-gray-600 space-y-1 text-sm'>
        <li>Dimension: 10cm x 5cm x 2cm</li>
        <li>Weight: 150g</li>
        <li>Material: Recycled Aluminum</li>
        <li>Power Source: USB-C</li>
      </ul>
    </div>
    <div x-show='cardTab === \"reviews\"' x-cloak>
      <h4 class='text-lg font-semibold mb-2'>Customer Reviews</h4>
      <p class='text-gray-600 italic'>\"Excellent product, exceeded expectations!\" - Reviewer One</p>
      <p class='text-gray-600 italic mt-2'>\"Solid build quality, but the color was slightly off.\" - Reviewer Two</p>
    </div>
  </div>
</div>

Carousel/Slider Card

Note: A functional carousel/slider requires JavaScript (like SwiperJS, Flickity) or a more complex Alpine.js setup for state management and transitions. This example shows a single card designed to look like part of a slider.

List Card

To-Do List

Finish project proposal
Schedule team meeting
Review design mockups
Reply to client emails

<!-- List Card -->
<div class='bg-white p-6 rounded-lg shadow-lg w-full max-w-md'>
  <h3 class='text-xl font-semibold text-gray-800 mb-4 border-b pb-2'>To-Do List</h3>
  <ul class='space-y-3'>
    <li class='flex items-center'>
      <input id='task1' type='checkbox' class='h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-3' checked>
      <label for='task1' class='text-gray-700 line-through'>Finish project proposal</label>
    </li>
    <li class='flex items-center'>
      <input id='task2' type='checkbox' class='h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-3'>
      <label for='task2' class='text-gray-700'>Schedule team meeting</label>
    </li>
    <li class='flex items-center'>
      <input id='task3' type='checkbox' class='h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-3'>
      <label for='task3' class='text-gray-700'>Review design mockups</label>
    </li>
    <li class='flex items-center'>
       <input id='task4' type='checkbox' class='h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-3' checked>
      <label for='task4' class='text-gray-700 line-through'>Reply to client emails</label>
    </li>
  </ul>
  <button class='mt-6 w-full px-4 py-2 bg-blue-100 text-blue-700 text-sm font-medium rounded hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors'>
      Add New Task
  </button>
</div>

Form Card

Note: Consider using the official @tailwindcss/forms plugin for enhanced default form styling.

<!-- Form Card -->
<div class='bg-white p-8 rounded-lg shadow-lg w-full max-w-lg'>
  <h3 class='text-2xl font-semibold text-gray-800 mb-6'>Contact Us</h3>
  <form action='#' method='POST' class='space-y-6'>
    <div class='grid grid-cols-1 md:grid-cols-2 gap-6'>
      <div>
        <label for='first-name' class='block text-sm font-medium text-gray-700 mb-1'>First Name</label>
        <input type='text' name='first-name' id='first-name' autocomplete='given-name' class='w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='John'>
      </div>
      <div>
        <label for='last-name' class='block text-sm font-medium text-gray-700 mb-1'>Last Name</label>
        <input type='text' name='last-name' id='last-name' autocomplete='family-name' class='w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='Doe'>
      </div>
    </div>
    <div>
      <label for='email' class='block text-sm font-medium text-gray-700 mb-1'>Email Address</label>
      <input type='email' name='email' id='email' autocomplete='email' required class='w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='you@example.com'>
    </div>
    <div>
      <label for='message' class='block text-sm font-medium text-gray-700 mb-1'>Message</label>
      <textarea id='message' name='message' rows='4' required class='w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='Your message...'></textarea>
    </div>
    <div>
      <button type='submit' class='w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
        Send Message
      </button>
    </div>
  </form>
</div>

Note: Consider using the official @tailwindcss/forms plugin for enhanced default form styling.

Welcome Back!

Not a member? Sign up now

<!-- Login/Signup Card -->
<div class='bg-white p-8 rounded-lg shadow-lg w-full max-w-sm'>
  <h2 class='text-2xl font-bold text-center text-gray-800 mb-8'>Welcome Back!</h2>
  <form action='#' method='POST' class='space-y-6'>
    <div>
      <label for='login-email' class='block text-sm font-medium text-gray-700'>Email address</label>
      <div class='mt-1'>
        <input id='login-email' name='email' type='email' autocomplete='email' required class='appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='you@example.com'>
      </div>
    </div>

    <div>
       <div class='flex justify-between items-baseline'>
          <label for='login-password' class='block text-sm font-medium text-gray-700'>Password</label>
          <a href='#' class='text-sm text-indigo-600 hover:text-indigo-500'>Forgot password?</a>
       </div>
      <div class='mt-1'>
        <input id='login-password' name='password' type='password' autocomplete='current-password' required class='appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='********'>
      </div>
    </div>

    <div class='flex items-center'>
       <input id='remember-me' name='remember-me' type='checkbox' class='h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'>
       <label for='remember-me' class='ml-2 block text-sm text-gray-900'>Remember me</label>
    </div>

    <div>
      <button type='submit' class='w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
        Sign in
      </button>
    </div>
  </form>

  <p class='mt-6 text-center text-sm text-gray-600'>
    Not a member?
    <a href='#' class='font-medium text-indigo-600 hover:text-indigo-500'>
      Sign up now
    </a>
  </p>
</div>

Onboarding Card

Welcome to Our App!

Let's get you started. We'll guide you through the essential features in just a few steps.

<!-- Onboarding Card -->
<div class='bg-white p-6 rounded-lg shadow-lg w-full max-w-md text-center'>
  <img class='w-3/4 max-w-[250px] h-auto mx-auto mb-6' src='https://picsum.photos/300/200' alt='Onboarding Illustration'>
  <h2 class='text-2xl font-semibold text-gray-800 mb-3'>Welcome to Our App!</h2>
  <p class='text-gray-600 mb-6 px-4'>Let's get you started. We'll guide you through the essential features in just a few steps.</p>
  <div class='flex justify-center space-x-4'>
    <button class='px-5 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Skip
    </button>
    <button class='px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Get Started
    </button>
  </div>
</div>

Wizard/Step Card

Note: State management for moving between steps requires JavaScript (e.g., Alpine.js).

Personal Info
2 Account Details
3 Confirmation

Account Details (Step 2/3)

<!-- Wizard/Step Card -->
<!-- NOTE: State management for moving between steps requires JavaScript (e.g., Alpine.js). -->
<div class='bg-white p-8 rounded-lg shadow-lg w-full max-w-lg'>
  <!-- Step Indicator -->
  <div class='mb-8'>
    <ol class='flex items-center w-full text-sm font-medium text-center text-gray-500'>
      <li class='flex md:w-full items-center text-blue-600 sm:after:content-[\"\"] after:w-full after:h-1 after:border-b after:border-blue-100 after:border-4 after:inline-block after:mx-6 xl:after:mx-10'>
        <span class='flex items-center after:content-[\"/\"] sm:after:hidden after:mx-2 after:text-gray-200'>
          <svg class='w-4 h-4 mr-2 sm:w-5 sm:h-5' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'></path></svg>
          Personal <span class='hidden sm:inline-flex sm:ml-2'>Info</span>
        </span>
      </li>
      <li class='flex md:w-full items-center text-blue-600 sm:after:content-[\"\"] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:inline-block after:mx-6 xl:after:mx-10'>
         <span class='flex items-center after:content-[\"/\"] sm:after:hidden after:mx-2 after:text-gray-200'>
          <span class='mr-2'>2</span>
          Account <span class='hidden sm:inline-flex sm:ml-2'>Details</span>
        </span>
      </li>
      <li class='flex items-center'>
        <span class='mr-2'>3</span>
        Confirmation
      </li>
    </ol>
  </div>

  <!-- Step Content (Example: Step 2) -->
  <div>
    <h3 class='text-xl font-semibold text-gray-800 mb-4'>Account Details (Step 2/3)</h3>
    <form action='#' class='space-y-4'>
      <div>
        <label for='wizard-username' class='block text-sm font-medium text-gray-700'>Username</label>
        <input type='text' id='wizard-username' class='mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='Choose a username'>
      </div>
      <div>
        <label for='wizard-password' class='block text-sm font-medium text-gray-700'>Password</label>
        <input type='password' id='wizard-password' class='mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' placeholder='Create a password'>
      </div>
    </form>
  </div>

  <!-- Navigation -->
  <div class='mt-8 flex justify-between'>
    <button type='button' class='px-5 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Previous
    </button>
    <button type='button' class='px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Next Step
    </button>
  </div>
</div>

Error/Status Card

Error

Something went wrong. Please check your input and try again.

Success

Your action was completed successfully.

Warning

Please double-check the details before proceeding.

Information

This is an informational message providing context or guidance.

<!-- Error/Status Cards Container -->
<div class='flex flex-col space-y-4 w-full max-w-md'>

  <!-- Error -->
  <div class='bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md shadow' role='alert'>
    <div class='flex'>
      <div class='py-1'>
        <svg class='fill-current h-6 w-6 text-red-500 mr-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 18a8 8 0 100-16 8 8 0 000 16zm-1-10a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm1 3a1 1 0 100 2 1 1 0 000-2z'/></svg>
      </div>
      <div>
        <p class='font-bold'>Error</p>
        <p class='text-sm'>Something went wrong. Please check your input and try again.</p>
      </div>
    </div>
  </div>

  <!-- Success -->
   <div class='bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md shadow' role='alert'>
    <div class='flex'>
      <div class='py-1'>
        <svg class='fill-current h-6 w-6 text-green-500 mr-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/></svg>
      </div>
      <div>
        <p class='font-bold'>Success</p>
        <p class='text-sm'>Your action was completed successfully.</p>
      </div>
    </div>
  </div>

  <!-- Warning -->
   <div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-md shadow' role='alert'>
    <div class='flex'>
      <div class='py-1'>
         <svg class='fill-current h-6 w-6 text-yellow-500 mr-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 18a8 8 0 100-16 8 8 0 000 16zM9 13a1 1 0 112 0v1a1 1 0 11-2 0v-1zm1-7a1 1 0 011 1v3a1 1 0 11-2 0V7a1 1 0 011-1z'/></svg>
      </div>
      <div>
        <p class='font-bold'>Warning</p>
        <p class='text-sm'>Please double-check the details before proceeding.</p>
      </div>
    </div>
  </div>

   <!-- Info -->
   <div class='bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-md shadow' role='alert'>
    <div class='flex'>
      <div class='py-1'>
        <svg class='fill-current h-6 w-6 text-blue-500 mr-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm1 5a1 1 0 100-2 1 1 0 000 2z'/></svg>
      </div>
      <div>
        <p class='font-bold'>Information</p>
        <p class='text-sm'>This is an informational message providing context or guidance.</p>
      </div>
    </div>
  </div>

</div>

Skeleton/Loading State Card

<!-- Skeleton/Loading State Card -->
<div class='border border-gray-200 bg-white p-4 shadow rounded-lg w-full max-w-sm animate-pulse'>
  <div class='flex space-x-4 items-center'>
    <div class='rounded-full bg-gray-300 h-12 w-12'></div>
    <div class='flex-1 space-y-3 py-1'>
      <div class='h-3 bg-gray-300 rounded w-3/4'></div>
      <div class='space-y-2'>
        <div class='h-2 bg-gray-300 rounded'></div>
        <div class='h-2 bg-gray-300 rounded w-5/6'></div>
      </div>
    </div>
  </div>
   <div class='space-y-3 mt-4'>
      <div class='grid grid-cols-3 gap-4'>
          <div class='h-2 bg-gray-300 rounded col-span-2'></div>
          <div class='h-2 bg-gray-300 rounded col-span-1'></div>
      </div>
       <div class='h-2 bg-gray-300 rounded'></div>
   </div>
</div>

Note: This card is styled like modal content. Implementing the overlay behavior (making it appear centered on the screen with a backdrop) requires additional HTML structure and JavaScript.

Overlay Content Title

This card represents content that would typically appear in a modal or overlay, floating above the main page content. It includes a close button for dismissal.

<!-- Overlay Card (Modal Style) -->
<!-- NOTE: This shows the card itself. Triggering its appearance as an overlay (e.g., modal) requires JS and positioning logic (fixed/absolute). -->
<div class='relative bg-white p-6 rounded-lg shadow-xl w-full max-w-lg mx-auto'>
  <button class='absolute top-3 right-3 text-gray-400 hover:text-gray-600 focus:outline-none' aria-label='Close'>
    <svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
      <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
    </svg>
  </button>
  <h3 class='text-xl font-semibold text-gray-800 mb-4'>Overlay Content Title</h3>
  <p class='text-gray-600 mb-6'>
    This card represents content that would typically appear in a modal or overlay, floating above the main page content. It includes a close button for dismissal.
  </p>
  <div class='flex justify-end space-x-3'>
     <button class='px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Cancel
    </button>
     <button class='px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors'>
      Confirm Action
    </button>
  </div>
</div>

Grid Card (Dashboard Style)

Designed for use within dashboard grids (e.g., CSS Grid or Flexbox). Often displays key metrics or summaries.

Total Revenue

$45,231.89

+12% from last month

Chart Area

New Users

1,250

-3% from last week

Pending verification: 5

Server Load

78%

High Utilization

<!-- Grid Card (Dashboard Style) -->
<!-- Place this card within a CSS Grid or Flexbox container for layout -->
<div class='bg-white p-4 rounded-lg shadow-md flex flex-col justify-between h-full'>
  <div>
    <div class='flex justify-between items-start mb-2'>
      <h4 class='font-semibold text-gray-600 text-sm uppercase'>Total Revenue</h4>
      <span class='p-1.5 bg-green-100 text-green-700 rounded-full'>
        <!-- Dollar Icon -->
        <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
          <path stroke-linecap='round' stroke-linejoin='round' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
        </svg>
      </span>
    </div>
    <p class='text-3xl font-bold text-gray-800 mb-1'>$45,231.89</p>
    <p class='text-xs text-green-500 flex items-center'>
       <!-- Arrow Up Icon -->
       <svg xmlns='http://www.w3.org/2000/svg' class='h-3 w-3 mr-1' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='3'>
         <path stroke-linecap='round' stroke-linejoin='round' d='M5 10l7-7m0 0l7 7m-7-7v18' />
       </svg>
       <span>+12% from last month</span>
    </p>
  </div>
  <div class='mt-4 h-16 bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400'>
    <!-- Placeholder for a small chart (e.g., Sparkline) -->
    Chart Area
  </div>
</div>

Transparent/Glassmorphism Card

Note: Requires backdrop-blur support in the browser. Works best when placed over an image or colorful background.

Glassmorphism Card

This card uses background blur and transparency to create a frosted glass effect. Best viewed over a colorful or image background.

<!-- Transparent/Glassmorphism Card -->
<div class='relative w-full max-w-sm rounded-xl bg-white/30 backdrop-blur-md shadow-lg border border-white/20 overflow-hidden'>
  <!-- Background elements for visual effect (optional) -->
  <div class='absolute top-0 left-0 -translate-x-1/4 -translate-y-1/4 w-32 h-32 bg-purple-400/50 rounded-full blur-2xl'></div>
  <div class='absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 w-24 h-24 bg-blue-400/50 rounded-full blur-2xl'></div>

  <!-- Card Content -->
  <div class='relative p-6 text-white'>
      <h3 class='text-xl font-semibold mb-2 text-shadow'>Glassmorphism Card</h3>
      <p class='text-sm text-white/80 text-shadow-sm'>
        This card uses background blur and transparency to create a frosted glass effect. Best viewed over a colorful or image background.
      </p>
       <button class='mt-4 px-4 py-1.5 bg-white/20 border border-white/30 rounded-full text-xs font-medium hover:bg-white/30 transition-colors'>
         Explore
       </button>
  </div>
</div>

<!-- Add this basic text-shadow utility if needed, or use a plugin -->
<style> .text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.2); } .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.15); } </style>

Elevated Card

Highly Elevated Card

This card uses a large shadow (shadow-2xl) to create a strong sense of depth and elevation off the page.

<!-- Elevated Card -->
<div class='bg-white p-6 rounded-lg shadow-2xl w-full max-w-sm transform transition duration-300 hover:scale-[1.02]'>
  <h3 class='text-xl font-semibold text-gray-800 mb-2'>Highly Elevated Card</h3>
  <p class='text-gray-600'>This card uses a large shadow (<code class='text-xs bg-gray-200 px-1 rounded'>shadow-2xl</code>) to create a strong sense of depth and elevation off the page.</p>
</div>

Bordered Card

Dashed Border Card

This card features a prominent dashed border for a distinct visual style. You can use solid, dotted, etc., and any color.

Gradient Border Card

Achieved by nesting; the outer div provides the gradient background/padding (acting as the border).

<!-- Dashed Border Card -->
<div class='bg-white p-6 rounded-lg border-2 border-dashed border-purple-400 w-full max-w-sm'>
  <h3 class='text-xl font-semibold text-gray-800 mb-2'>Dashed Border Card</h3>
  <p class='text-gray-600'>This card features a prominent dashed border for a distinct visual style. You can use solid, dotted, etc., and any color.</p>
</div>

<!-- Gradient Border Card -->
<div class='mt-6 bg-gradient-to-r from-cyan-50 to-blue-100 p-1 rounded-lg w-full max-w-sm shadow-sm'>
 <div class='bg-white p-6 rounded-md'>
    <h3 class='text-xl font-semibold text-gray-800 mb-2'>Gradient Border Card</h3>
    <p class='text-gray-600'>Achieved by nesting; the outer div provides the gradient background/padding (acting as the border).</p>
 </div>
</div>

Rounded Corner Card

Rounded LG

(Default in many examples)

Content

Rounded 2XL

More pronounced curve

Content

Rounded Image

Element rounding

<!-- Rounded Corner Examples -->
<div class='grid grid-cols-1 sm:grid-cols-3 gap-6 w-full max-w-3xl'>
  <!-- Default (rounded-lg) -->
  <div class='bg-white p-4 shadow-md rounded-lg text-center'>
    <h4 class='font-semibold mb-1'>Rounded LG</h4>
    <p class='text-xs text-gray-500'>(Default in many examples)</p>
    <div class='mt-2 h-16 bg-slate-200 rounded-lg flex items-center justify-center text-slate-500 text-sm'>Content</div>
  </div>
  <!-- Extra Rounded (rounded-2xl) -->
  <div class='bg-white p-4 shadow-md rounded-2xl text-center'>
    <h4 class='font-semibold mb-1'>Rounded 2XL</h4>
    <p class='text-xs text-gray-500'>More pronounced curve</p>
     <div class='mt-2 h-16 bg-slate-200 rounded-2xl flex items-center justify-center text-slate-500 text-sm'>Content</div>
  </div>
   <!-- Fully Rounded (usually for elements like images/avatars) -->
   <!-- Example: Card containing a fully rounded image -->
   <div class='bg-white p-4 shadow-md rounded-xl text-center'>
     <h4 class='font-semibold mb-1'>Rounded Image</h4>
     <p class='text-xs text-gray-500'>Element rounding</p>
     <img class='mt-2 h-16 w-16 rounded-full mx-auto object-cover' src='https://picsum.photos/64/64' alt='Fully Rounded'>
   </div>
</div>

Themed Card (Light/Dark/Brand)

Demonstrates different visual themes using background and text colors. For true light/dark mode switching, use Tailwind's dark: variant prefix and configure theme switching in your project.

Light Theme Card

Standard white background with dark text. The default for most components here.

Dark Theme Card

Dark background with light text. Use Tailwind's dark: variant for automatic theme switching.

Brand Theme Card

Uses brand colors (e.g., blue/indigo gradient) for background and appropriate text colors.

<!-- Themed Card Examples -->
<div class='grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl'>

  <!-- Light Theme (Default) -->
  <div class='bg-white p-6 rounded-lg shadow-md'>
    <h3 class='text-xl font-semibold text-gray-800 mb-2'>Light Theme Card</h3>
    <p class='text-gray-600'>Standard white background with dark text. The default for most components here.</p>
  </div>

  <!-- Dark Theme -->
  <div class='bg-gray-800 p-6 rounded-lg shadow-md'>
    <h3 class='text-xl font-semibold text-white mb-2'>Dark Theme Card</h3>
    <p class='text-gray-300'>Dark background with light text. Use Tailwind's <code class='text-xs bg-gray-600 text-gray-200 px-1 rounded'>dark:</code> variant for automatic theme switching.</p>
  </div>

  <!-- Brand Theme -->
  <div class='bg-gradient-to-br from-blue-500 to-indigo-600 p-6 rounded-lg shadow-md text-white'>
    <h3 class='text-xl font-semibold mb-2'>Brand Theme Card</h3>
    <p class='text-blue-100'>Uses brand colors (e.g., blue/indigo gradient) for background and appropriate text colors.</p>
  </div>

</div>

FAQ on Tailwind CSS Cards

What are Tailwind CSS cards?

Tailwind CSS cards are responsive card designs built using the Tailwind framework. They're UI card patterns that help organize content into visually distinct containers. Unlike traditional CSS approaches, these card components leverage Tailwind's utility-first methodology, allowing for rapid development of clean, consistent card layouts without writing custom CSS.

How do I create a basic card in Tailwind CSS?

To build a simple Tailwind card component, use:

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="/image.jpg" alt="Card image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">Card content goes here.</p>
  </div>
</div>

This card structure provides a foundation for various frontend component cards.

Can Tailwind cards be responsive?

Absolutely! Card responsiveness is built into Tailwind's core. Use breakpoint prefixes like sm:, md:, and lg: to adjust card layouts at different screen sizes:

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <!-- Card content -->
</div>

This creates flexible card layouts that adapt seamlessly across devices.

How do I add hover effects to Tailwind cards?

Card hover effects are simple with Tailwind's hover: prefix:

<div class="transform transition duration-300 hover:scale-105 hover:shadow-xl">
  <!-- Card content -->
</div>

These interactive cards CSS effects create engaging user experiences without requiring custom animation code.

What's the best way to organize multiple Tailwind cards?

For organizing multiple card components, use Flexbox or CSS Grid:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Cards go here -->
</div>

This creates responsive card grid layouts with proper spacing between card containers.

How do I customize Tailwind card styles?

Customizing card styling in Tailwind involves:

Using Tailwind's utility classes
Extending theme in tailwind.config.js
Creating component classes for reusable card designs

This approach gives you the flexibility to create custom Tailwind cards while maintaining design consistency across your web component cards.

What are some common Tailwind card patterns?

Popular Tailwind card examples include:

Product cards with image, title, price
Profile cards with avatar, name, info
Feature cards with icon, heading, description
Pricing cards with plan details
Content cards for blog posts or articles

These card design patterns serve various UI needs while maintaining consistent card visual hierarchy.

How do I make accessible Tailwind cards?

For accessible card designs:

Use semantic HTML (article, section)
Ensure proper color contrast
Add focus states for keyboard navigation
Include appropriate ARIA attributes
Test with screen readers

Follow these card accessibility standards to ensure your component-based cards work for all users.

Can I use Tailwind cards with JavaScript frameworks?

Yes! Tailwind cards integrate perfectly with React, Vue, Angular and other frameworks. Create reusable card components that leverage both Tailwind's utility classes and your framework's component system. This approach creates a robust card component structure that's easy to maintain and extend.

What alternatives exist to building Tailwind cards from scratch?

If you don't want to build custom card components:

Use Tailwind UI (official component library)
Try other CSS frameworks like Bootstrap cards
Explore open-source Tailwind component collections
Check GitHub repositories for card templates
Consider Material UI cards for a different design approach

These resources provide ready-made card design templates to jumpstart your projects.