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

成功消息组件

一个成功消息组件,采用新拟态设计,支持响应式和黑暗主题。

预览

HTML 代码

<div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" 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>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

相关组件

成功消息组件

一个为黑暗模式设计的响应式成功消息组件,采用生动的色彩方案,非常适合展示作品集中的工作。

打开

Industrial_Success_Message

一个简单的工业风格成功消息组件,带有温暖的中性色,专为 CRM/业务工具设计,具有原材料美学和完全响应能力,并支持深色模式。

打开

Success Messages 组件

一个受 Material Design 启发的复杂成功消息组件,适用于社交媒体应用程序,具有相似的颜色、响应速度和深色模式支持。

打开