Composants Fiches produits Composant Cartes de produit

Composant Cartes de produit

Un composant de carte produit réactif conçu pour le mode sombre, avec des couleurs vives et de multiples éléments interactifs adaptés aux blogs et à la consommation de contenu.

Aperçu

HTML Code

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

Composants associés

Composant Cartes de produit

Un composant de carte produit simple et réactif avec des micro-interactions, conçu pour les interfaces de médias sociaux à l’aide de Tailwind CSS, prenant en charge le thème sombre et le schéma de couleurs en niveaux de gris.

Ouvrir

Composant Cartes de produit

Il s’agit d’un composant complexe et réactif de fiches produits pour les plateformes de divertissement/médias, avec un design organique/inspiré de la nature utilisant une palette forêt/verte. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir

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