پیشنمایش زنده
کد HTML
<div class="flex flex-col gap-2 w-60 sm:w-72 text-[10px] sm:text-xs z-50">
<div
class="succsess-alert cursor-default flex items-center justify-between w-full h-12 sm:h-14 rounded-lg bg-[#232531] px-[10px]"
>
<div class="flex gap-2">
<div class="text-[#2b9875] bg-white/5 backdrop-blur-xl p-1 rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 12.75 6 6 9-13.5"
></path>
</svg>
</div>
<div>
<p class="text-white">done successfully :)</p>
<p class="text-gray-500">This is the description section</p>
</div>
</div>
<button
class="text-gray-600 text-gray-600 hover:bg-white/5 p-1 rounded-md transition-colors ease-linear"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
</div>
کد CSS
.fixed{position:fixed}.z-50{z-index:50}.flex{display:flex}.h-12{height:3rem}.h-6{height:1.5rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-full{width:100%}.cursor-default{cursor:default}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.bg-\[\#232531\]{--tw-bg-opacity:1;background-color:rgb(35 37 49 / var(--tw-bg-opacity))}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.p-1{padding:0.25rem}.px-\[10px\]{padding-left:10px;padding-right:10px}.text-\[10px\]{font-size:10px}.text-\[\#2b9875\]{--tw-text-opacity:1;color:rgb(43 152 117 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.ease-linear{transition-timing-function:linear}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}@media (min-width: 640px){.sm\:h-14{height:3.5rem}.sm\:w-72{width:18rem}.sm\:text-xs{font-size:0.75rem;line-height:1rem}}