Komponente "Medien einbetten"
Eine Media Embed-Komponente, die für den E-Commerce mit einem 3D-Designstil, einem komplementären Farbschema und einem responsiven Layout entwickelt wurde und den Dunkelmodus unterstützt.
HTML-Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
<h2 class="text-white text-lg font-semibold">Product Title</h2>
<p class="text-gray-300">Short description of the product goes here.</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
<div class="flex justify-between items-center mt-2">
<span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
<button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Medien einbetten"
Eine Medieneinbettungskomponente, die mit Glasmorphismus-Effekten entwickelt wurde und ein responsives Design bietet, das für Unternehmenswebsites mit Unterstützung für dunkle Themen geeignet ist.
Retro Media Embed-Komponente
Eine reaktionsschnelle Media Embed-Komponente mit einem "Retro/Vintage"-Design, inspiriert von der Ästhetik der 80er/90er Jahre wie alten Röhrenmonitoren und Videorekordern. Es verwendet ein komplementäres Farbschema aus Blaugrün und Orange auf schiefergrauer Basis, geeignet für "Business/Corporate"-Websites. Die Komponente zeichnet sich durch eine moderate Komplexität mit Hover-Effekten auf der Wiedergabeschaltfläche und der Medienminiaturansicht, einer gefälschten REC-Lichtanimation und dekorativen, nicht funktionalen Steuerelementen aus. Es enthält Unterstützung für dunkle Themen mit dem Präfix "dark:" von Tailwind. Der Medienbereich ist für ein Seitenverhältnis von 16:9 ausgelegt (erfordert das Tailwind Aspect-Ratio-Plugin oder einen CSS-Fallback wie padding-bottom-Trick). Es wird ein Platzhalterbild von picsum.photos verwendet.
Retro Media Embed-Komponente
Eine reaktionsschnelle Medieneinbettungskomponente mit Retro-/Vintage-Design, lebendigen Farben, moderater Komplexität und Unterstützung für den Dunkelmodus, geeignet für E-Commerce-Plattformen.