Carte d’annonce immobilière - Pastel suisse
Une carte d’annonce immobilière simple, propre et réactive avec un style typographique suisse/international et une palette de couleurs pastel, adaptée aux plateformes immobilières. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
<div class="relative mb-4 overflow-hidden rounded-md">
<img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
<div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
For Sale
</div>
</div>
<h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
Modern City Apartment
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
123 Main St, Anytown, CA 90210
</p>
<div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
3 Beds
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
2 Baths
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
1,200 sqft
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Central
</div>
</div>
<div class="flex items-center justify-between">
<p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
$350,000
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
Details
<svg class="w-4 h-4 ml-2" 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="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
</a>
</div>
</div>Composants associés
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu réactif conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre et une palette de couleurs vives. Il comprend des sections pour les avatars des utilisateurs, le contenu textuel et les images.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des micro-interactions, des couleurs en niveaux de gris et une complexité modérée, conçu pour les portefeuilles avec prise en charge réactive des thèmes sombres.
SimpleContentDisplay
Un composant d’affichage de contenu simple avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.