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

成功消息组件

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

预览

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>

相关组件

Neumorphic_Charity_Success_Message

一个简单、响应式的成功消息组件,采用柔和的中构样式和单色配色方案设计,适用于非营利组织和慈善组织。包括深色模式支持。

打开

成功消息组件 17

一个采用 Tailwind CSS 设计的大胆和原始的成功消息组件,具有响应式效果和深色主题支持。

打开

SuccessMessagesComponent 组件

一个简单的电子商务成功消息组件,具有单色 Material Design 美学、响应式布局和深色主题支持。

打开