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

成功消息组件

一个展示大胆成功消息的组件,采用野兽派设计风格,具有高对比度、响应式效果和暗黑主题支持。

预览

HTML 代码

<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

相关组件

Success Messages 组件

一个简单、艺术的成功消息组件,采用棕褐色/棕色配色方案,适用于加密货币/区块链应用。具有柔和的水彩风格设计、完全响应能力和深色模式支持。

打开

Memphis Pastel 成功寄语

一个简单、响应迅速的成功消息组件,具有孟菲斯设计美学,使用柔和的色彩。具有俏皮的几何形状并支持深色模式。

打开

成功消息组件

一个使用Tailwind CSS设计的仿生风格响应式成功消息组件,提供黑暗主题支持。

打开