Composants Fiches produits Composant Cartes de produits
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.
Aperçu

HTML Code

<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>
Composants associés

Composant Cartes de produit

Un composant de carte produit de style brutalisme avec un contraste élevé, des effets réactifs et une prise en charge du mode sombre.
Ouvrir
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
Composant Cartes de produit

Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.
Ouvrir