Componente di confronto prodotti - Immobiliare (Carta/Stampa)
Un semplice componente di confronto dei prodotti ispirato alla carta e alla stampa per gli annunci immobiliari, con due proprietà. Utilizza toni viola/viola e supporta la modalità scura.
Codice HTML
<div class="font-sans bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight uppercase relative w-fit mx-auto">
<span class="block pb-2">Compare Properties</span>
<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-1 bg-purple-500 rounded-full"></span>
</h2>
<div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
<!-- Property Card 1 -->
<div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
<div class="relative pb-2/3 h-0">
<img src="https://picsum.photos/id/1018/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
<span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">New Listing</span>
</div>
<div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
<div>
<h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Charming Family Home</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">1234 Maple Drive, Anytown, USA</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$450,000</p>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>4 Beds</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>2 Baths</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>2,100 sqft</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Built 1998</li>
</ul>
</div>
<a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
View Details
</a>
</div>
</div>
<!-- Comparison line/separator (hidden on mobile, visible on tablet/desktop) -->
<div class="hidden lg:flex flex-col items-center justify-center relative">
<div class="h-full w-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-lg shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
VS
</div>
</div>
<div class="block lg:hidden flex items-center justify-center relative my-4">
<div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-base shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
VS
</div>
</div>
<!-- Property Card 2 -->
<div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
<div class="relative pb-2/3 h-0">
<img src="https://picsum.photos/id/1021/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
<span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">Reduced Price</span>
</div>
<div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
<div>
<h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Modern City Apartment</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">5678 Oak Street, Metroville, USA</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$420,000</p>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>3 Beds</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>2 Baths</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>1,800 sqft</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Built 2015</li>
</ul>
</div>
<a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
View Details
</a>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
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