组件 警报消息 警报消息组件

警报消息组件

一个响应式拟物化警报消息组件,专为博客/内容使用而设计,具有互补的配色方案和深色主题支持。

预览

HTML 代码

<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
    </p>
    <div class="mt-4 flex justify-end">
        <img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
    </div>
</div>

相关组件

警报消息组件

此组件是一条警报消息,具有极简/平面设计、大地色调配色方案和复杂的布局。它专为社交媒体界面而设计,并支持深色主题。它使用 Tailwind CSS 进行样式设置,并包含多个交互式元素。

打开

警报消息组件

专为博客设计的极简警报消息组件,具有灰度配色方案。它包括标题、消息和关闭按钮。支持深色主题的响应式设计。

打开

警报消息组件

一个具有复古/怀旧设计的警报消息组件,包括对深色模式和响应式的支持.

打开