组件 错误消息 错误消息组件

错误消息组件

具有3D设计的错误消息组件,单色配色方案,适中复杂度用于仪表板目的,响应式设计并支持深色主题。

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

相关组件

错误消息组件 45

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

打开

错误信息组件

一个采用野兽派风格、使用 Tailwind CSS 设计的响应式错误消息组件,具有高对比、独特布局和暗模式支持。

打开

错误消息组件

拟物化三色方案复杂电子商务错误消息组件,具有响应式设计和深色模式支持。

打开