Comparaison des produits brutalistes
Composant de comparaison de produits brutaliste pour les médias sociaux avec schéma de couleurs monochromatiques et prise en charge du mode sombre
HTML Code
<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>Composants associés
EarthyComparaison des produits
Un composant réactif de comparaison de produits pour le commerce électronique, avec trois fiches produits. Stylisé avec Tailwind CSS en utilisant une palette de couleurs de terre (bruns, verts, ambres) et des éléments de conception 3D simples comme des ombres et des barres d’accentuation pour plus de profondeur et d’engagement. Inclut la prise en charge du mode sombre et utilise des images de remplacement de picsum.photos.
Composant de comparaison de produits Neumorphism
Un composant de comparaison de produits simple et réactif dans le style Neumorphism avec des tons de terre, la prise en charge du thème sombre et pas de JavaScript.
Composant de comparaison de produits
Un composant de comparaison de produits avec le style de conception Skeuomorphism, la palette de couleurs pastel et le niveau de complexité modéré, conçu pour les tableaux de bord. Il comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.