Brutalisme Comparaison de produits Composant
Un composant de comparaison de produits de style brutaliste conçu pour les systèmes de réservation, avec une palette de couleurs forêt/vert, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
<div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
<h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
APPOINTMENT SELECTION MATRIX
</h1>
<!-- Comparison Table Header -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
<div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
</div>
<!-- Comparison Rows -->
<div class="space-y-4">
<!-- Feature Row 1 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Duration</div>
<div class="text-lg p-2 text-center">30 min</div>
<div class="text-lg p-2 text-center">60 min</div>
<div class="text-lg p-2 text-center">90 min</div>
</div>
<!-- Feature Row 2 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Consultation</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 3 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Priority Support</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 4 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Follow-up</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 5 (Image Example) -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Resource Access</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
</div>
</div>
<!-- Feature Row 6 (Avatar Example) -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Dedicated Agent</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
</div>
</div>
<!-- Action Buttons / Prices -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
<div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
<div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
<span class="text-3xl lg:text-4xl">$49</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
<div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
<span class="text-3xl lg:text-4xl">$99</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
<div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
<span class="text-3xl lg:text-4xl">$149</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
</div>
<div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
<p class="mb-2">*All prices are subject to change without notice.</p>
<p>Booking slots are limited. Secure your appointment now.</p>
</div>
</div>
</div>Composants associés
Composant de comparaison de produits Cyberpunk
Un composant simple et futuriste de comparaison de produits pour les sites Web d’événements/conférences, avec un arrière-plan sombre, des couleurs neutres froides et un accent néon pour une esthétique cyberpunk. Réactif avec prise en charge du mode sombre.
Composant de comparaison de produits - Style d’entreprise rétro
Un composant de comparaison de produits réactif avec une esthétique d’entreprise rétro/vintage utilisant une palette de couleurs bleues monochromatiques. Dispose de plusieurs éléments interactifs et de la prise en charge du mode sombre. Le design comprend des cartes de style rétro avec des motifs géométriques inspirés des années 80/90, une typographie à l’ancienne et des accents semblables à des pixels. Parfait pour les sites Web d’entreprise qui souhaitent se démarquer avec un design nostalgique tout en conservant leur professionnalisme.
Composant de comparaison de produits
Un composant de comparaison de produits de luxe/haut de gamme pour le matériel de photographie, doté d’un design élégant, d’une typographie sophistiquée et d’une palette de couleurs très contrastée. Comprend une mise en page réactive et la prise en charge du mode sombre.