Componente di confronto dei prodotti
Un componente di confronto dei prodotti scheumorfico progettato con Tailwind CSS con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-full md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
</div>
</div>
<div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
</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 - 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 - Colori autunnali biologici/ispirati alla natura
Un componente di confronto dei prodotti complesso e reattivo con un design organico/ispirato alla natura, che utilizza colori autunnali. Adatto per applicazioni sportive e di fitness, con supporto completo della modalità scura.