Componenti funzionali Componente
Componente funzionale per E-commerce con design responsive e supporto a tema scuro.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
<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 dark:text-indigo-400 font-semibold">Category</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
<div class="mt-4 flex items-center">
<div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
<button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
<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 dark:text-indigo-400 font-semibold">Category</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
<div class="mt-4 flex items-center">
<div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
<button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componenti funzionali Componente
Componente del dashboard con componenti funzionali che utilizzano i principi di Material Design, una combinazione di colori analoga e una complessità moderata. Il componente include il design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Componenti funzionali Componente
Un componente web che imita le controparti del mondo reale in uno stile business-corporate con una combinazione di colori complementari, un layout semplice e un design reattivo con supporto per la modalità scura.
Componenti funzionali Componente - Stile Brutalismo
Un componente web funzionale progettato in stile brutalista utilizzando Tailwind CSS. Il componente presenta un layout audace con contrasto elevato, effetti reattivi e supporto per temi scuri. Include immagini segnaposto e avatar per un appeal visivo.