Componente di visualizzazione del prezzo 22
Un componente minimalista per la visualizzazione dei prezzi che mostra l'immagine, il nome, il prezzo e un pulsante da aggiungere al carrello di un prodotto. Progettato con reattività e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>Componenti correlati
Componente di visualizzazione del prezzo neumorfico
Un componente di visualizzazione dei prezzi complesso, reattivo e compatibile con la modalità oscura con uno stile di progettazione a neumorfismo e una combinazione di colori analoga, adatto per il consumo di blog/contenuti. Presenta più elementi interattivi come interruttori e livelli dettagliati.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi in stile neumorfismo con una combinazione di colori complementari (arancione tenue e azzurro), complessità moderata per l'e-commerce. Presenta un design reattivo con supporto per il tema scuro. Il componente mostra l'immagine del prodotto, il titolo e il prezzo con un pulsante "Aggiungi al carrello". La modalità scura utilizza colori complementari desaturati.
Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi con design reattivo, supporto per la modalità oscura e combinazione di colori vivaci.