Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi reattivo per una dashboard, caratterizzato da microinterazioni coinvolgenti e una combinazione di colori triadica, con supporto per la modalità scura.
Codice HTML
<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
<div class="flex flex-col">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
</div>
</div>
<div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
<h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
<div class="mt-2 flex justify-between items-center">
<button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
</div>
</div>
</div>Componenti correlati
Componente di visualizzazione del prezzo
Componente di visualizzazione dei prezzi in stile neumorfismo con effetti reattivi e supporto per temi scuri.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi ispirato al 3D con una combinazione di colori monocromatica, progettato per le interfacce dei social media. Si tratta di un componente complesso e reattivo con supporto per la modalità oscura, costruito utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
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.