Scheda di inserzione immobiliare - Pastello svizzero
Una scheda di annuncio immobiliare semplice, pulita e reattiva con uno stile tipografico svizzero/internazionale e una combinazione di colori pastello, adatta per le piattaforme immobiliari. Include il supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Cartolina retrò per i social media
Un componente di cartolina reattiva per i social media con un'estetica retrò/vintage anni '80/'90, utilizzando una combinazione di colori analoga (Sky, Teal, Purple) con accenti fucsia. Dispone di supporto per la modalità oscura ed effetti di passaggio del mouse interattivi. I contenuti includono avatar dell'utente, nome utente, timestamp, post di testo, immagini e pulsanti di azione (mi piace, commento, condivisione). Costruito con Tailwind CSS.
Componente Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti reattivo con supporto della modalità oscura per siti Web aziendali/aziendali.
Componente di visualizzazione dei contenuti Art Déco
Un componente di visualizzazione dei contenuti complesso e reattivo ispirato all'Art Déco per siti Web aziendali/aziendali, con motivi geometrici, ricche tonalità gioiello e supporto per la modalità scura. Include più sezioni per funzionalità, testimonianze e inviti all'azione.