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.
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"
Eine Komponente für die Schaltfläche "In den Einkaufswagen" im 3D-Stil mit leuchtenden Farben, responsivem Design und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.
In den Warenkorb Button
Eine reaktionsschnelle Komponente für die Schaltfläche "In den Warenkorb", die in einem skeuomorphen Stil gestaltet ist, mit leuchtenden Farben und Unterstützung für dunkle Themen, die für Social-Media-Schnittstellen geeignet ist.
Komponente der Schaltfläche "In den Warenkorb"
Eine Schaltflächenkomponente im 3D-Stil "In den Warenkorb", die für Social-Media-Schnittstellen entwickelt wurde. Es verfügt über eine reichhaltige Benutzeroberfläche mit Tiefe, ansprechenden Designelementen und ist reaktionsschnell mit Unterstützung für dunkle Themen.