组件 成功消息 成功消息组件

成功消息组件

一个简单干净的成功消息组件,具有响应式设计和深色模式支持.

预览

HTML 代码

<div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
    <p class="font-bold">Success!</p>
    <p class="ml-2 text-sm">Your action was successful.</p>
  </div>
  <button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

相关组件

成功消息组件

一个成功消息组件,设计为深色模式,用于阅读博客/内容。它具有类似的配色方案并且响应迅速。

打开

成功消息组件

成功消息组件与暗模式 - 具有响应效果和深色主题支持。无需JavaScript代码。对于暗模式,CSS支持就足够了。

打开

成功消息组件

响应式成功消息组件,支持深色模式和适用于电子商务的 Glassmorphism 样式。

打开