Rechercher des composants

Catégories

Composants Fiches produits

Fiches produits

Affichage des informations sur le produit sous forme de carte

Composant Cartes de produits

Un composant de carte produit réactif avec un style de conception Skeuomorphism, une palette de couleurs de terre et des interactions complexes, adapté à un portefeuille. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.

Ouvrir Aperçu

                <div class="bg-stone-100  dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">

  <!-- Product Card 1 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">15x10 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.8 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Clay</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">50x40 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">5.2 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Oak Wood</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">10x8 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.3 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Terra Cotta</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- You might need to add this to your tailwind.config.js for the texture pattern -->
   <style>
    .bg-pattern-texture {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .dark .bg-pattern-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }
  </style>

</div>

Composant Cartes de produits

Un composant de carte produit réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, adapté à un tableau de bord. La conception comprend des espaces réservés pour les images et les détails du produit.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
    Retro Product Dashboard
  </h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Cartes de produits

Fiches produits réactives avec effet verre dépoli Glassmorphism utilisant des couleurs pastel, avec prise en charge du mode sombre. Convient aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Product Card 1 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>
  </div>
</div>

Composant Cartes de produit

Un composant de carte produit réactif avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs adaptés aux interfaces de médias sociaux, tels que l’image du produit, le titre, la description, le prix et le bouton d’ajout au panier. La conception utilise des éléments translucides semblables à du verre givré avec des effets de flou. Aucun Javascript n’est utilisé, seulement du HTML avec des classes CSS Tailwind.

Ouvrir Aperçu

                <div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
  <!-- Product Card 1 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=1"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $120.00
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=2"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $99.50
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/women/2.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=3"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $249.99
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/3.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
      </div>
    </div>
  </div>
</div>

Composant Cartes de produits

Un composant simple de carte produit e-commerce conçu dans le style Material Design à l’aide d’une palette de couleurs en niveaux de gris et d’un design réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit

Un composant de carte produit réactif avec des micro-interactions dans des tons Terre, fournissant une prise en charge du thème sombre pour la présentation du portefeuille.

Ouvrir Aperçu

                <div class="flex flex-wrap justify-center p-4">  
    <!-- Product Card -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>  
                </div>  
            </div>  
        </div>  
    </div>  

    <!-- Repeat for more products -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>

Composant Cartes de produit

Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Cartes de produit

Composant de cartes de produits skeuomorphiques pour le tableau de bord avec un design réactif et la prise en charge du thème sombre.

Ouvrir Aperçu

                <!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

  </div>

</div>

Composant Cartes de produit

Un composant de carte produit réactif conçu dans le style Material Design, avec une palette de couleurs en niveaux de gris. Il comprend une image, un titre, une description et un bouton avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <div class="flex items-center p-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-3">
            <h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
            <p class="text-gray-600 dark:text-gray-400">Product Owner</p>
        </div>
    </div>
</div>

Fiche produit Skeuomorphic

Un composant de carte produit skeuomorphe pour un tableau de bord, stylisé en niveaux de gris, de complexité moyenne, réactif avec le mode sombre.

Ouvrir Aperçu

                <div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
    <div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
  </div>
  <div class="p-4">
    <h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
    <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
    <div class="flex items-center justify-between">
      <span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
      <button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
    </div>
  </div>
</div>