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

警报消息组件

一个简单的拟态风格警报消息组件,适用于商业网站,具有鲜艳的色彩和响应式黑暗主题支持,使用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>

相关组件

有机自然灵感警报

一个简单的响应式警报消息组件,具有有机/自然灵感的设计、互补的配色方案,适用于咨询/服务网站。包括深色模式支持。

打开

警报消息组件

响应式警告消息组件,具有微交互、柔和色彩方案、复杂设计、商务/企业目的、暗黑模式支持,并且不使用JavaScript。

打开

警报消息组件

一个以野兽派风格设计的警报消息组件,采用粉彩色彩方案,适用于商业/企业网站,支持黑暗主题的响应式设计。

打开