Composants Caddie Composant de panier d’achat

Composant de panier d’achat

Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

Composants associés

Composant de panier d’achat - Aquarelle/Sépia artistique

Un composant de panier d’achat simple et réactif avec un style aquarelle/artistique utilisant des tons sépia/bruns, adapté aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.

Ouvrir

Composant de panier d’achat

Composant de panier d’achat avec conception 3D, tons de terre et éléments interactifs complexes. Il est conçu pour un site Web de blog/contenu, avec un design réactif et une prise en charge du thème sombre, en utilisant Tailwind CSS.

Ouvrir

Composant de panier d’achat

Un composant de panier d’achat simple et réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu à l’aide de Tailwind CSS.

Ouvrir