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
Componente di confronto dei prodotti con design minimalista/piatto, combinazione di colori dei toni della terra e complessità moderata per scopi di dashboard utilizzando Tailwind CSS. Il componente è reattivo e supporta il tema scuro. Niente JavaScript.
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 componente di confronto dei prodotti semplice e reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizza i nomi dei prodotti, le funzionalità e i prezzi per il confronto.