Scheda Prodotto Skeuomorphic
Un componente della scheda prodotto scheumorfico per un dashboard, con stile in scala di grigi, complessità media, reattivo con modalità scura.
Codice HTML
<div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="relative">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
<div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
</div>
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
<button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
</div>
</div>
</div>Componenti correlati
Componente scheda lavoro analogo scheumorfico
Un componente della scheda di lavoro reattivo con uno stile di progettazione scheumorfico, che utilizza una combinazione di colori analoga, adatto per bacheche di lavoro e piattaforme di sviluppo della carriera. Include il supporto per la modalità oscura.
Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato in uno stile minimalista con una combinazione di colori pastello, adatto per siti Web aziendali o aziendali e include il supporto per la modalità scura.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato con lo stile scheumorfismo, la combinazione di colori dei toni della terra e il supporto del tema scuro. Ideale per cruscotti.