组件 错误消息 Real estate 错误消息

Real estate 错误消息

专为房地产平台设计的专业干净的错误消息组件,具有单色配色方案、完全响应能力和深色模式支持。

预览

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>

相关组件

错误消息组件 45

一个复古/老式风格的错误消息组件,具有响应式效果和支持暗主题,使用Tailwind CSS。

打开

错误信息组件

使用 Skeuomorphism、Triadic 配色方案和简单布局优化了错误消息组件。使用 Tailwind CSS 制作,以实现响应能力和深色模式支持。无 JavaScript。

打开

Retro_Vintage_Error_Message_Rainbow_Gradient

一个复杂的、复古/复古主题的错误消息组件,适用于教育平台,具有彩虹渐变背景和 80 年代/90 年代美学,完全响应暗模式支持。

打开