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

错误消息组件

使用 Material Design 原则的响应式错误消息组件,具有三元配色方案和深色模式支持,专为产品组合量身定制。

预览

HTML 代码

<div class="flex flex-col items-center justify-center p-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <img src="https://picsum.photos/200/100" alt="Error Image" class="rounded-lg shadow-sm mb-4">
    <div class="text-center">
        <h2 class="text-lg font-bold text-red-600 dark:text-red-400">Error Occurred!</h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Oops! Something went wrong while trying to display the content.</p>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Please try again later or contact support.</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
    </div>
</div>

相关组件

Luxury_Premium_Healthcare_Error_Message

用于医疗保健应用的豪华/高级风格错误消息组件,具有复杂的排版、高对比度的配色方案以及支持深色模式的完全响应能力。

打开

错误信息组件

Retro/Vintage 错误消息组件,具有柔和的配色方案、复杂的布局、响应式设计和使用 Tailwind CSS 的深色主题支持。

打开

错误消息组件

一个具有拟物化设计的错误消息组件,具有逼真的警告图标和阴影边框。它支持响应式布局,并包含不同的暗黑模式样式,确保在不同主题下的可读性和视觉适宜性。

打开