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

成功消息组件

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

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-zinc-950">
  <div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
    <strong class="font-bold select-none">Success!</strong>
    <span class="block sm:inline select-none">Your action was successful.</span>
    <span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
      <svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <title>Close</title>
        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
      </svg>
    </span>
  </div>
</div>

相关组件

Neumorphic_Charity_Success_Message

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

打开

Skeuomorphic_Retro_Success_Message_Component

中等复杂度的成功消息组件,采用拟物化、复古/复古风格设计,适用于时尚/美容品牌。它包括响应式设计和深色模式支持。

打开

SuccessMessagesComponent 组件

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

打开