Komponente der Schaltfläche "In den Warenkorb"
Eine reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente, die nach den Prinzipien des Material Designs gestaltet ist, ein triadisches Farbschema aufweist und den Dunkelmodus unterstützt. Es wurde für die Verwendung im Dashboard entwickelt, enthält einen Mengenwähler und integriert Tiefeneffekte mit Tailwind CSS für Schatten und Animationen.
HTML-Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
<div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
<img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow text-center md:text-left">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
<div class="flex items-center justify-center md:justify-start mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
<span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
</div>
<div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
<label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
</div>
<button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
Add to Cart
</button>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
<p>In stock: <span class="font-bold text-green-500">Yes</span></p>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente der Schaltfläche "In den Warenkorb"
Eine komplexe "In den Warenkorb"-Button-Komponente für Anwendungen im Gesundheitswesen/Medizin, inspiriert von schweizerischer/internationaler Typografie und Erdtönen. Es zeichnet sich durch ein klares, minimalistisches Design mit Schwerpunkt auf Typografie und Rastersystemen aus und bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
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.
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.