Confronto tra i prodotti Brutalist
Componente di confronto dei prodotti Brutalist per i social media con combinazione di colori monocromatica e supporto per la modalità scura
Codice HTML
<div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
<div class="grid grid-cols-2 gap-4">
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product A</h3>
<img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product B</h3>
<img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
</div>
</div>
</div>Componenti correlati
Confronto prodotti terrosi
Un componente reattivo per il confronto dei prodotti per l'e-commerce, con tre schede prodotto. Progettato con Tailwind CSS utilizzando una combinazione di colori dei toni della terra (marroni, verdi, ambra) e semplici elementi di design 3D come ombre e barre di accento per profondità e coinvolgimento. Include il supporto per la modalità oscura e utilizza immagini segnaposto da picsum.photos.
Componente di confronto dei prodotti
Un componente di confronto dei prodotti scheumorfico progettato con Tailwind CSS con effetti reattivi e supporto per temi scuri.
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.