Componentes Carrito Componente de carrito de compras

Componente de carrito de compras

Componente de carrito de compras con diseño brutalista, efectos responsivos y soporte para temas oscuros.

Vista previa

Código HTML

<div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
  <h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Item Name</h2>
        <span class="text-xl font-bold">$99.99</span>
      </div>
      <p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
        <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Another Item</h2>
        <span class="text-xl font-bold">$199.99</span>
      </div>
      <p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
    <h2 class="text-3xl font-bold">Total</h2>
    <span class="text-3xl font-bold">$299.98</span>
  </div>
  <div class="mt-8 text-right">
    <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
  </div>
</div>

Componentes relacionados

Componente de carrito de compras

Un componente de carrito de compras diseñado en 3D con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir

Componente de carrito de compras

Un componente de carrito de compras diseñado con skeuomorfismo. Cuenta con elementos digitales que imitan a sus contrapartes del mundo real, soporte receptivo completo y compatibilidad con temas oscuros.

Abrir

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.

Abrir