Komponente "Medien einbetten"
Eine reaktionsschnelle Media Embed-Komponente, die auf skeuomorphe Weise gestaltet ist, Erdtonfarben verwendet und für den E-Commerce geeignet ist, mit Unterstützung für dunkle Themen.
HTML-Code
<div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
<div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
<button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
</div>
</div>Verwandte Komponenten
Komponente "Medien einbetten"
Eine reaktionsschnelle Medieneinbettungskomponente, die mit dem Neumorphism-Stil in Tailwind CSS entworfen wurde und den Dunkelmodus unterstützt.
Media Embed Component - Minimalistische Erdtöne
Eine minimalistische Medieneinbettungskomponente für Dashboards mit responsivem Design und Unterstützung für dunkle Themen in Erdtönen. Es werden ein Videoplayer, ein Titel, eine Beschreibung und Kanalinformationen angezeigt.
Komponente "Medien einbetten"
Eine Medieneinbettungskomponente mit einem 3D-Designstil für Tiefe und Engagement, reaktionsschnelle Effekte und Unterstützung für den Dunkelmodus.