Komponente "Medien einbetten"
Eine reaktionsschnelle Medieneinbettungskomponente für den E-Commerce mit minimalistischem Design, lebendigen Farben und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Medien einbetten"
Eine einfache, reaktionsschnelle Medieneinbettungskomponente mit Graustufen-3D-Design und Unterstützung für den Dunkelmodus, die für Unternehmenswebsites geeignet ist. Verwendet Tailwind CSS für das Styling.
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.
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.