Componente di confronto dei prodotti
Un componente di confronto dei prodotti semplice e reattivo con un design glassmorphism, una combinazione di colori del tono della terra e il supporto della modalità scura. Visualizza due schede prodotto affiancate su schermi più grandi e impilate su schermi più piccoli.
Codice HTML
<div class="container mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<!-- Product 1 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
<!-- Product 2 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
</div>
</div>Componenti correlati
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.
Componente di confronto dei prodotti
Un componente di confronto dei prodotti complesso e reattivo con elementi di progettazione 3D, una combinazione di colori triadici e il supporto della modalità scura, adatto per un contesto dashboard.
LussoProdottoConfronto
Un componente di confronto di prodotti di lusso e premium per articoli di moda/bellezza, caratterizzato da un design elegante, una tipografia sofisticata e una combinazione di colori tenui/desaturati con reattività completa e supporto per la modalità scura.