TailwindreadyTailwindready

Product Cards

Elegant product cards and detail layouts to showcase your products with images, descriptions, and pricing.

4 COMPONENT VARIATIONS
Components

Classic Product Card

A clean and minimal product card with image, title, price, and action button.

View

Compact Grid Card

A space-efficient product card designed for grid layouts and mobile-first experiences.

View

Feature-Rich Product Card

A comprehensive product card with detailed specifications, multiple images, and advanced features.

View

Minimal Product Card

A clean, minimalist product card focusing on essential information with elegant typography.

View

Classic Product Card

A clean and minimal product card with image, title, price, and action button.

Premium Laptop
New

Premium Laptop Pro

High-performance laptop with cutting-edge technology for professionals and creators.

$1,299 $1,599
4.8 (124)

Component Code

<div class="bg-white border border-gray-200 rounded-lg overflow-hidden max-w-sm w-full">
  <div class="relative">
    <img
      src="https://img.freepik.com/free-photo/view-electronic-product-balancing-podium_23-2150141319.jpg"
      alt="Premium Laptop"
      class="w-full h-60 object-cover"
    />
    <div class="absolute top-3 right-3">
      <span class="bg-cyan-700 text-white px-3 py-1 rounded-full text-sm font-medium">
        New
      </span>
    </div>
  </div>

  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-3">
      Premium Laptop Pro
    </h3>
    <p class="text-gray-600 text-sm mb-6 leading-relaxed">
      High-performance laptop with cutting-edge technology for professionals and creators.
    </p>

    <div class="flex items-center justify-between mb-6">
      <div class="flex items-baseline">
        <span class="text-2xl font-bold text-gray-900">$1,299</span>
        <span class="text-lg text-gray-500 line-through ml-3">$1,599</span>
      </div>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <span class="text-sm text-gray-600 ml-1">4.8 (124)</span>
      </div>
    </div>

    <button class="w-full bg-cyan-700 text-white py-3 px-6 rounded-lg font-medium hover:bg-cyan-800 transition-colors duration-200">
      Add to Cart
    </button>
  </div>
</div>

Compact Grid Card

A space-efficient product card designed for grid layouts and mobile-first experiences.

Smart Watch
-20%

Smart Fitness Watch

4.7
• 52 sold
$159 $199
Free delivery

Component Code

<div class="bg-white border border-gray-200 rounded-lg overflow-hidden max-w-xs w-full">
  <div class="relative">
    <img
      src="https://img.freepik.com/free-vector/realistic-fitness-trackers_23-2148530530.jpg"
      alt="Smart Watch"
      class="w-full h-45 object-cover"
    />
    <div class="absolute top-3 left-3 flex flex-col space-y-2">
      <span class="bg-emerald-600 text-white px-2 py-1 rounded text-xs font-medium">
        -20%
      </span>
    </div>
    <button class="absolute top-3 right-3 bg-white bg-opacity-90 p-2 rounded-full hover:bg-opacity-100 transition-all">
      <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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" />
      </svg>
    </button>
  </div>

  <div class="p-4">
    <h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">
      Smart Fitness Watch
    </h3>

    <div class="flex items-center mb-3">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <span class="text-xs text-gray-600 ml-1">4.7</span>
      </div>
      <span class="text-xs text-gray-400 mx-2">•</span>
      <span class="text-xs text-gray-600">52 sold</span>
    </div>

    <div class="flex items-center justify-between mb-6">
      <div class="flex items-baseline">
        <span class="text-lg font-bold text-gray-900">$159</span>
        <span class="text-sm text-gray-500 line-through ml-2">$199</span>
      </div>
      <span class="text-xs text-emerald-600 font-medium">Free delivery</span>
    </div>

    <div class="flex space-x-2">
      <button class="flex-1 bg-cyan-700 text-white py-2 px-3 rounded text-sm font-medium hover:bg-cyan-800 transition-colors duration-200">
        Add to Cart
      </button>
      <button class="p-2 border border-gray-300 rounded hover:border-cyan-700 hover:text-cyan-700 transition-colors duration-200">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Feature-Rich Product Card

A comprehensive product card with detailed specifications, multiple images, and advanced features.

Professional Camera
Professional Limited Edition

Professional DSLR Camera

4.9

Professional-grade DSLR camera with 45MP sensor, 4K video recording, and advanced autofocus system.

Sensor: 45MP Full Frame
Video: 4K @ 60fps
ISO Range: 100-51,200
Weight: 650g
$2,499 or $208/mo

Component Code

<div class="bg-white border border-gray-200 rounded-lg overflow-hidden max-w-md">
  <div class="relative">
    <img
      src="https://img.freepik.com/free-photo/photo-camera-still-life_23-2150630950.jpg"
      alt="Professional Camera"
      class="w-full h-70 object-cover"
    />
    <div class="absolute top-3 left-3 flex flex-col space-y-2">
      <span class="bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium">
        Professional
      </span>
      <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-medium">
        Limited Edition
      </span>
    </div>
    <div class="absolute bottom-3 right-3 flex space-x-2">
      <button class="bg-white bg-opacity-90 p-2 rounded-full hover:bg-opacity-100 transition-all">
        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
        </svg>
      </button>
      <button class="bg-white bg-opacity-90 p-2 rounded-full hover:bg-opacity-100 transition-all">
        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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" />
        </svg>
      </button>
    </div>
  </div>

  <div class="p-6">
    <div class="flex items-start justify-between mb-3">
      <h3 class="text-lg font-medium text-gray-900">
        Professional DSLR Camera
      </h3>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <span class="text-sm text-gray-600 ml-1">4.9</span>
      </div>
    </div>

    <p class="text-gray-600 text-sm mb-4 leading-relaxed">
      Professional-grade DSLR camera with 45MP sensor, 4K video recording, and advanced autofocus system.
    </p>

    <div class="space-y-3 mb-6">
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">Sensor:</span>
        <span class="text-gray-900 font-medium">45MP Full Frame</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">Video:</span>
        <span class="text-gray-900 font-medium">4K @ 60fps</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">ISO Range:</span>
        <span class="text-gray-900 font-medium">100-51,200</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">Weight:</span>
        <span class="text-gray-900 font-medium">650g</span>
      </div>
    </div>

    <div class="flex items-center justify-between mb-6">
      <div class="flex items-baseline">
        <span class="text-2xl font-bold text-gray-900">$2,499</span>
        <span class="text-sm text-gray-500 ml-2">or $208/mo</span>
      </div>
      <div class="flex items-center space-x-1">
        <span class="w-3 h-3 bg-gray-900 rounded-full border-2 border-white ring-1 ring-gray-300"></span>
        <span class="w-3 h-3 bg-gray-600 rounded-full border-2 border-white ring-1 ring-gray-300"></span>
        <span class="w-3 h-3 bg-blue-600 rounded-full border-2 border-white ring-1 ring-gray-300"></span>
      </div>
    </div>

    <div class="flex space-x-3">
      <button class="flex-1 bg-cyan-700 text-white py-3 px-4 rounded-lg font-medium hover:bg-cyan-800 transition-colors duration-200">
        Add to Cart
      </button>
      <button class="px-4 py-3 border border-cyan-700 text-cyan-700 rounded-lg font-medium hover:bg-cyan-50 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Minimal Product Card

A clean, minimalist product card focusing on essential information with elegant typography.

Modern Desk Lamp

Home & Living

Modern Desk Lamp

Sleek and functional desk lamp with adjustable brightness and modern minimalist design.

$89
(28)

Component Code

<div
  class="bg-white border border-gray-100 rounded-lg overflow-hidden max-w-sm hover:border-gray-200 transition-colors duration-200">
  <div class="relative group">
    <img
      src="https://img.freepik.com/free-photo/book-lightbulb-eyewear-pot-simple_1172-307.jpg"
      alt="Modern Desk Lamp"
      class="w-full h-60 object-cover group-hover:scale-105 transition-transform duration-300"
    />
  </div>

  <div class="p-6">
    <div class="mb-4">
      <p class="text-xs text-gray-500 uppercase tracking-wider font-medium mb-2">
        Home & Living
      </p>
      <h3 class="text-lg font-medium text-gray-900 mb-3">
        Modern Desk Lamp
      </h3>
      <p class="text-gray-600 text-sm leading-relaxed">
        Sleek and functional desk lamp with adjustable brightness and modern minimalist design.
      </p>
    </div>

    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center space-x-3">
        <span class="text-xl font-semibold text-gray-900">$89</span>
        <div class="flex items-center">
          <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
            <path
              d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
          </svg>
          <span class="text-sm text-gray-500 ml-1">(28)</span>
        </div>
      </div>
      <button class="text-gray-400 hover:text-cyan-700 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 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" />
        </svg>
      </button>
    </div>

    <div class="space-y-3">
      <button class="w-full bg-gray-900 text-white py-3 px-6 rounded-lg font-medium hover:bg-gray-800 transition-colors duration-200">
        Add to Cart
      </button>
      <button class="w-full text-gray-700 py-3 px-6 rounded-lg font-medium border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
        Quick View
      </button>
    </div>
  </div>
</div>

Ready to Use These Components?

Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.

Explore More Components