Cerca componenti

Categorie

Carrello

Funzione e-commerce per il ritiro degli articoli da acquistare

Componente del carrello della spesa

Un componente del carrello della spesa complesso e reattivo con combinazione di colori in scala di grigi, progettato per uno scopo di blog/contenuto. Presenta microinterazioni utilizzando Tailwind CSS, con supporto per la modalità oscura e senza JavaScript.

Aperto Anteprima

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  </div>

Componente del carrello della spesa

Componente del carrello della spesa con Material Design, combinazione di colori monocromatici e complessità moderata per l'e-commerce. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

Componente del carrello della spesa

Un componente del carrello della spesa complesso e reattivo con microinterazioni e colori analoghi, per i social media, con supporto della modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-4 lg:p-8 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 dark:text-white">Shopping Cart</h1>
    
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items -->
        <div class="lg:w-2/3">
            <!-- Item 1 -->
            <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item1/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Awesome Product Name</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Blue, Size: M</p>
                    <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$49.99</span>
                        <span class="text-sm text-gray-500 line-through ml-2 dark:text-gray-500">$59.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="1" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Item 2 -->
             <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item2/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Another Great Product</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Red, Size: L</p>
                     <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-green-600 dark:text-green-400">$29.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="2" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Order Summary -->
        <div class="lg:w-1/3 bg-gray-100 p-6 rounded-lg dark:bg-gray-800 animate-slideInRight">
            <h2 class="text-xl font-bold mb-4 dark:text-white">Order Summary</h2>
            <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Subtotal:</span>
                <span class="font-semibold dark:text-white">$109.97</span>
            </div>
             <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Shipping:</span>
                <span class="font-semibold dark:text-white">$5.00</span>
            </div>
             <div class="flex justify-between mb-4">
                <span class="dark:text-gray-300">Tax:</span>
                <span class="font-semibold dark:text-white">$8.80</span>
            </div>
            <div class="flex justify-between font-bold text-lg mb-6 dark:text-white">
                <span>Total:</span>
                <span>$123.77</span>
            </div>
            <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
                Checkout
            </button>
        </div>
    </div>
</div>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideInRight {
     animation: slideInRight 0.5s ease-out;
}
</style>

Componente del carrello della spesa

Un componente reattivo del carrello della spesa progettato in stile neumorfismo utilizzando Tailwind CSS, adatto per interfacce di social media con supporto per temi scuri.

Aperto Anteprima

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <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">$19.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 2 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <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">$29.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 3 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
            <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
        </div>
    </div>
</div>

Componente del carrello della spesa

Un semplice componente del carrello della spesa reattivo che imita il design del mondo reale con colori vivaci, adatto per l'e-commerce.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

Carrello della spesa retrò/vintage

Componente del carrello della spesa con stile retrò / vintage, combinazione di colori pastello e complessità semplice. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

Componente del carrello della spesa

Un componente del carrello della spesa in stile neumorfico per l'e-commerce, con una combinazione di colori monocromatica, ricchi elementi interattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <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>

Componente del carrello della spesa

Un componente del carrello della spesa progettato con effetti Glassmorphism, che utilizza una combinazione di colori complementari e ottimizzato per la modalità scura. Perfetto per l'utilizzo del portfolio, la presentazione di lavori o prodotti.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

Componente del carrello della spesa

Un semplice componente del carrello della spesa reattivo con design del neumorfismo e combinazione di colori complementari per il supporto del tema scuro.

Aperto Anteprima

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

Componente del carrello della spesa

Un componente del carrello della spesa semplice e reattivo con design retrò/vintage, combinazione di colori complementari e supporto per la modalità scura, creato utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>