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

警报消息组件

一个简单的拟态风格警报消息组件,适用于商业网站,具有鲜艳的色彩和响应式黑暗主题支持,使用Tailwind CSS,无需JavaScript。

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
          Successfully updated!
        </p>
      </div>
    </div>
  </div>
</div>

相关组件

警报消息组件

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

打开

警报消息组件

一个为电子商务设计的响应式警报消息组件,采用玻璃形态效果。它采用简单的布局,具有单色配色方案,并支持使用Tailwind CSS的暗模式。

打开

警报消息组件

一个复杂的、生动的、玻璃效果样式的警报消息组件,适用于电子商务,支持黑暗模式。

打开