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

警报消息组件

一个简单的、响应式的、灰度警报消息组件,适用于电子商务网站,支持暗模式。

预览

HTML 代码

<div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">New message:</span> Your order has been placed successfully.
  </div>
</div>

相关组件

Retro_Alert_Messages_Component

一个简单的响应式警报消息组件,具有复古/复古的黑色、白色和霓虹灯强调色方案,适用于仪表板。包括深色模式支持。

打开

警报消息组件

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

打开

电商单色警报

一个用于电子商务的简单响应式警报消息组件,具有单色配色方案和用于关闭的微妙微交互。支持深色模式。

打开