Componente di confronto dei prodotti
Un componente reattivo per il confronto dei prodotti con un'estetica retrò/vintage degli anni '80/'90, con supporto per temi scuri con Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic1/100/100" alt="Product 1 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 1. It's a great product for your needs.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$29.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic2/100/100" alt="Product 2 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 2. This product serves your unique demands.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$39.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>Componenti correlati
Componente di confronto dei prodotti
Un componente di confronto dei prodotti semplice e reattivo con un'estetica Memphis Design, utilizzando una tavolozza di colori retrò/vintage. Progettato per CRM/Business Tools, supporta la modalità oscura e visualizza le funzionalità chiave per due prodotti.
Componente di confronto dei prodotti
Un componente di confronto dei prodotti complesso e reattivo con un design organico/ispirato alla natura, combinazione di colori complementari, supporto per la modalità oscura e su misura per applicazioni sportive/fitness. Presenta linee fluide e forme naturali.
Componente di confronto dei prodotti
Un componente reattivo per il confronto dei prodotti con elementi di design simili a 3D, supporto per temi scuri e integrazione di immagini segnaposto per la visualizzazione dei prodotti e avatar degli utenti utilizzando picsum.photos e randomuser.me.