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.
Codice HTML
<div class="bg-gray-900 dark:bg-gray-800 text-white p-5 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-violet-500">Product Comparison</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-5">
<div class="bg-red-600 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/150?random=1" alt="Product 1" class="w-full h-auto rounded-lg mb-2">
<h2 class="text-2xl font-semibold">Product One</h2>
<p class="mt-2">Description of Product One. This product is amazing!</p>
<div class="mt-3 flex justify-between">
<span class="font-bold text-lg">$99</span>
<button class="bg-white text-red-600 px-4 py-2 rounded-lg">Compare</button>
</div>
</div>
<div class="bg-green-600 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/150?random=2" alt="Product 2" class="w-full h-auto rounded-lg mb-2">
<h2 class="text-2xl font-semibold">Product Two</h2>
<p class="mt-2">Description of Product Two. A fantastic choice!</p>
<div class="mt-3 flex justify-between">
<span class="font-bold text-lg">$149</span>
<button class="bg-white text-green-600 px-4 py-2 rounded-lg">Compare</button>
</div>
</div>
<div class="bg-blue-600 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/150?random=3" alt="Product 3" class="w-full h-auto rounded-lg mb-2">
<h2 class="text-2xl font-semibold">Product Three</h2>
<p class="mt-2">Description of Product Three. Best-selling product!</p>
<div class="mt-3 flex justify-between">
<span class="font-bold text-lg">$199</span>
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg">Compare</button>
</div>
</div>
</div>
<div class="mt-8">
<h1 class="text-2xl font-bold text-violet-500">User Reviews</h1>
<div class="flex flex-col space-y-4 mt-3">
<div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-300 dark:text-gray-200">"Loved this product, it changed my life!"</p>
</div>
</div>
<div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-300 dark:text-gray-200">"I wasn't sure at first, but now I can't live without it!"</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di confronto dei prodotti
Design minimalista/piatto, combinazione di colori in scala di grigi, componente di confronto dei prodotti complesso per i social media con design reattivo e supporto per temi scuri.
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 - Monospace/Stile sviluppatore
Un componente di confronto prodotti complesso e reattivo progettato con un'estetica monospace/sviluppatore, con una combinazione di colori viola/viola. Ideale per applicazioni sportive e di fitness, è dotato di supporto per la modalità scura e di un look pulito ispirato al terminale con molteplici punti di confronto.