Componenti Messaggi di errore Messaggio di errore immobiliare

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.

Anteprima

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

Componente Messaggi di errore

Componente con design 3D, combinazione di colori monocromatici, complessità moderata per scopi di dashboard, design reattivo con supporto per temi scuri.

Aperto

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.

Aperto

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.

Aperto