Componente di confronto dei prodotti
Un componente di confronto dei prodotti reattivo con stile Material Design utilizzando Tailwind CSS, con layout basati su griglia, ombre e supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>Componenti correlati
Componente di confronto dei prodotti - Retro Corporate Style
Un componente di confronto dei prodotti reattivo con un'estetica aziendale retrò/vintage che utilizza una combinazione di colori blu monocromatica. Dispone di più elementi interattivi e supporto per la modalità oscura. Il design include carte in stile retrò con motivi geometrici ispirati agli anni '80/'90, tipografia della vecchia scuola e accenti simili a pixel. Perfetto per i siti web aziendali che vogliono distinguersi con un design nostalgico pur mantenendo la professionalità.
Componente di confronto dei prodotti
Un semplice componente di confronto dei prodotti progettato per l'interfaccia utente in modalità scura che utilizza una combinazione di colori in scala di grigi. Presenta un layout di base con elementi minimi, ideale per i contenuti del blog e per scopi di lettura.
Componente di confronto dei prodotti per il neumorfismo
Un componente di confronto dei prodotti semplice e reattivo in stile neumorfismo con toni della terra, supporto per temi scuri e assenza di JavaScript.