Componentes Carrito Componente de carrito de compras

Componente de carrito de compras

Un componente de carrito de compras simple para comercio electrónico, con un aspecto de diseño de materiales receptivo, combinación de colores complementaria y compatibilidad con temas oscuros.

Vista previa

Código HTML

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

Componentes relacionados

Componente de carrito de compras

Un componente de carrito de compras complejo y receptivo con esquema de color en escala de grises, diseñado para un propósito de blog / contenido. Presenta microinteracciones usando Tailwind CSS, con soporte para modo oscuro y sin JavaScript.

Abrir

Componente de carrito de compras corporativo retro

Un componente de carrito de compras complejo y receptivo con un estilo de diseño retro / vintage, centrado en la estética de los años 80 / 90 y tonos azules corporativos, adecuado para aplicaciones industriales / de fabricación. Incluye soporte para modo oscuro y elementos interactivos.

Abrir

OrgánicoNaturalezaDeportesComprasCarritoComponente

Un componente de carrito de compras simple y receptivo con un diseño orgánico / inspirado en la naturaleza, combinación de colores triádica, adecuado para aplicaciones deportivas y de fitness, con soporte para modo oscuro.

Abrir