TailwindreadyTailwindready
Icons

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

Need Icons for Your Project?

Discover our collection of hand-picked SVG icons designed for modern applications. Copy as HTML or JSX and use them instantly in your projects.

Browse Icons