Messaggio di errore immobiliare
Un componente di messaggio di errore professionale e pulito progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori monocromatica, reattività completa e supporto per la modalità oscura.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-md w-full mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
<div class="p-6 sm:p-8 text-center">
<div class="flex justify-center mb-4">
<svg class="w-16 h-16 text-red-500 dark:text-red-400" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">Property Not Found</h2>
<p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
We couldn't find the property you're looking for. It might have been sold, removed, or the link is incorrect.
</p>
<div class="space-y-3 sm:space-y-0 sm:space-x-3 sm:flex sm:justify-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Go to Homepage
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" 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="M7 8h10M7 12h4m1-8a9 9 0 00-9 9 9 9 0 009 9 9 9 0 009-9A9 9 0 007 8z"></path>
</svg>
Contact Support
</a>
</div>
</div>
</div>
</div>
Componenti correlati
Messaggi di errore Componente 45
Un componente per i messaggi di errore in stile retrò/vintage con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Componente Messaggi di errore
Un componente reattivo per i messaggi di errore con sfumature di tonalità della terra, transizioni fluide e supporto per la modalità oscura, adatto per siti Web di consulenza/servizi.
Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato per la modalità scura con una combinazione di colori monocromatica. È destinato a una dashboard per visualizzare errori o avvisi, con elementi interattivi come pulsanti di chiusura e icone di errore.