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

错误信息组件

一个专为社交网络接口设计的响应式错误消息组件,使用深色模式和灰度色彩方案,采用Tailwind CSS。

预览

HTML 代码

<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 text-center max-w-md w-full">
        <h2 class="text-lg font-semibold mb-2">Error Occurred</h2>
        <p class="mb-4">There was a problem processing your request. Please try again later.</p>
        <div class="flex items-center justify-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border border-gray-600 mr-3">
            <span class="text-sm">John Doe</span>
        </div>
        <img src="https://picsum.photos/200/100?random=1" alt="Error Illustration" class="rounded-lg mb-4 w-full">
        <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Retry
        </button>
    </div>
</div>

相关组件

错误信息组件

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

打开

错误消息组件

一个错误消息组件,采用野性主义风格,使用类似色彩方案,适用于社交媒体界面,具有响应式设计和暗黑主题支持。

打开

错误信息组件

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

打开