成功 CTA
#alert-005-SuccessCTA
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.alert-content {
@apply max-w-60 w-full rounded-xl overflow-hidden shadow-lg;
}
.top-content {
@apply p-10 bg-white space-y-5;
}
.icon-content {
@apply flex justify-center;
}
.icon {
@apply w-12 fill-white bg-amber-500 rounded-full overflow-hidden p-2;
}
.text-content {
@apply text-center space-y-1;
}
.title {
@apply text-2xl text-black;
}
.text {
@apply text-sm leading-4 text-black;
}
.button-content {
@apply bg-amber-500 py-10 px-5 flex justify-center;
}
.btn {
@apply px-5 py-2 bg-white rounded-full text-sm cursor-pointer tracking-wide text-black;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class="alert-content">
<div class="top-content">
<div class="icon-content">
<svg xmlns="http://www.w3.org/2000/svg" class="icon"
viewBox="0 -960 960 960">
<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
</svg>
</div>
<div class="text-content">
<p class="title">Success!</p>
<p class="text">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="button-content">
<button class="btn">Continue</button>
</div>
</div>
</body>
</html>