Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi reattivo con un'estetica retrò/vintage e colori vivaci, adatto per le interfacce dei social media, con supporto per la modalità oscura.
Codice HTML
<div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<div class="ml-3">
<h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
</div>
</div>
<h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
<button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>Componenti correlati
Componente di visualizzazione del prezzo
Un complesso componente di visualizzazione dei prezzi progettato in stile scheumorfico che imita gli elementi del mondo reale, adatto per blog e consumo di contenuti con una combinazione di colori triadica e un design reattivo con supporto per la modalità oscura.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi complesso e reattivo per una dashboard, con supporto per il tema scuro, che utilizza Tailwind CSS in un design piatto minimalista in scala di grigi.
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.