Komponente der Schaltfläche "In den Warenkorb"
Eine reaktionsschnelle Komponente für den "In den Warenkorb"-Schaltfläche, die im brutalistischen Stil mit leuchtenden Farben gestaltet ist und sich für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen eignet.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
<p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
<div class="mt-5">
<button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400">
</div>
</div>
</div>Verwandte Komponenten
In den Warenkorb Button Komponente 46
Eine Retro-/Vintage-Schaltflächenkomponente "In den Warenkorb", die mit Tailwind CSS entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen.
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.
Komponente der Schaltfläche "In den Warenkorb"
Eine reaktionsschnelle Schaltfläche "In den Warenkorb", die im dunklen Modus mit Tailwind CSS entworfen wurde, mit Hover-Effekten und Unterstützung für dunkle Themen.