CCHub Logo CCHub Tailwind Collection
Composants Comparaison des produits Composant de comparaison de produits - Immobilier (inspiré du papier et de l’impression)

Composant de comparaison de produits - Immobilier (inspiré du papier et de l’impression)

Il s’agit d’un composant simple, inspiré du papier et de l’impression, pour les annonces immobilières, mettant en vedette deux propriétés. Utilise des tons violets/violets et prend en charge le mode sombre.

Aperçu

HTML Code 

<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>

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.

Ouvrir

Composant de comparaison de produits

Un composant de comparaison de produits ludique et convivial pour les produits de sport/fitness, avec des neutres chauds, des éléments arrondis et un design réactif avec prise en charge du mode sombre.

Ouvrir

Composant de comparaison de produits - Cyberpunk Retro Charity

Un composant simple et réactif de comparaison de produits conçu avec une esthétique cyberpunk utilisant une palette de couleurs rétro/vintage, destiné aux organisations à but non lucratif/caritatives. Dispose d’une prise en charge du mode sombre et d’une mise en page propre et minimaliste.

Ouvrir