Componente di incorporamento multimediale
Un componente Media Embed reattivo con uno stile scheumorfico, utilizzando colori color Terra e adatto per l'e-commerce, con supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Cyberpunk Sports Media Incorpora
Un componente di incorporamento multimediale complesso e reattivo progettato per applicazioni sportive/fitness con un'estetica cyberpunk. Presenta sfondi scuri monocromatici con accenti al neon luminosi, più elementi interattivi e supporto completo per la modalità oscura.
Media Embed Component - Toni della terra minimalisti
Un componente multimediale minimalista incorporato per le dashboard, con design reattivo e supporto per temi scuri, che utilizza i toni della terra. Visualizza un lettore video, un titolo, una descrizione e le informazioni sul canale.
Componente di incorporamento multimediale - Crypto/Blockchain
Un componente di incorporamento multimediale semplice e reattivo progettato per applicazioni di criptovaluta o blockchain, con toni seppia/marrone e supporto della modalità scura per ridurre l'affaticamento degli occhi.