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
Un componente di confronto dei prodotti semplice e giocoso progettato con colori autunnali, adatto per la documentazione o i siti wiki. Presenta elementi arrotondati, reattività completa e supporto per la modalità scura.
Componente di confronto prodotti - Cyberpunk Retro Charity
Un componente di confronto dei prodotti semplice e reattivo progettato con un'estetica cyberpunk utilizzando una tavolozza di colori retrò/vintage, destinato a organizzazioni senza scopo di lucro/beneficenza. Offre il supporto per la modalità oscura e un layout pulito e minimalista.
Componente di confronto dei prodotti
Un componente di confronto prodotti con uno stile di design brutalista, caratterizzato da colori vivaci e complessità moderata per mostrare prodotti o lavori in un portfolio.