Brutalismo Componente di confronto dei prodotti
Un componente di confronto dei prodotti in stile brutalista progettato per i sistemi di prenotazione, caratterizzato da una tavolozza di colori foresta/verde, contrasto elevato e layout insoliti. È completamente reattivo e supporta la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente di confronto dei prodotti
Un componente reattivo per il confronto dei prodotti con elementi di design simili a 3D, supporto per temi scuri e integrazione di immagini segnaposto per la visualizzazione dei prodotti e avatar degli utenti utilizzando picsum.photos e randomuser.me.
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
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.