Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo per l'e-commerce con un design minimalista, colori vivaci e supporto per la modalità scura.
Codice HTML
<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>
Componenti correlati
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
Un componente di incorporamento multimediale semplice e reattivo con un'estetica cyberpunk e blu aziendale, progettato per le interfacce dei social media con supporto per la modalità oscura.
Componente di incorporamento di supporti scheumorfici
Un componente di incorporamento multimediale reattivo con design a scheumorfismo, combinazione di colori analoga e complessità moderata per siti Web aziendali. Include il supporto per la modalità oscura utilizzando Tailwind CSS.