Amber Arc Alert
#alert-004-AmberArc
<!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-80 w-full bg-white rounded-lg space-y-4 shadow-md overflow-hidden;
}
.close-content {
@apply max-w-24 w-full h-24 [border-bottom-right-radius:100px] bg-amber-400 p-5;
}
.close-btn {
@apply fill-black w-10 h-10 cursor-pointer;
}
.content {
@apply px-5 pb-16 space-y-10;
}
.top-content {
@apply space-y-4;
}
.title-content {
@apply flex justify-center;
}
.title {
@apply text-2xl font-bold relative before:absolute before:-bottom-2 before:left-1/2 before:-translate-x-1/2 before:w-1/2 before:h-1 before:rounded-full before:bg-amber-500 text-black;
}
.text {
@apply text-center text-gray-500 text-sm;
}
.next-btn {
@apply text-amber-500 tracking-widest font-semibold text-center;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class=" alert-content">
<div class="close-content">
<svg xmlns="http://www.w3.org/2000/svg" class="close-btn" viewBox="0 -960 960 960">
<path
d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
</div>
<div class="content">
<div class="top-content">
<div class="title-content">
<p class="title">Success!</p>
</div>
<p class="text">Congratulation! Your payment was complete. We will mail
you
the
details in some time.</p>
</div>
<div class="next-btn">CONTINUE</div>
</div>
</div>
</body>
</html>