CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button In den Warenkorb Button

In den Warenkorb Button

Eine reaktionsschnelle Schaltfläche "In den Einkaufswagen", die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet ist und Designs im Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
    <img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
    <h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold dark:text-white">$19.99</span>
      <button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente der Schaltfläche "In den Warenkorb"

Ein komplexer "In den Warenkorb"-Button mit Retro-/Vintage-Ästhetik und komplementärem Farbschema, der sich für eine professionelle Unternehmenswebsite eignet. Diese Komponente unterstützt den Dunkelmodus und ist reaktionsschnell, wobei Tailwind CSS für das Styling verwendet wird.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle Schaltfläche "In den Einkaufswagen", die für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Offen

In den Warenkorb Button

Eine 3D-Design-Schaltflächenkomponente "In den Einkaufswagen" mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen