پیشنمایش زنده
کد HTML
<div
class="relative w-full max-w-64 flex flex-wrap items-center justify-center py-3 pl-4 pr-14 rounded-lg text-base font-medium [transition:all_0.5s_ease] border-solid border border-[#f85149] text-[#b22b2b] [&_svg]:text-[#b22b2b] group bg-[linear-gradient(#f851491a,#f851491a)]"
>
<button
type="button"
aria-label="close-error"
class="absolute right-4 p-1 rounded-md transition-opacity text-[#f85149] border border-[#f85149] opacity-40 hover:opacity-100"
>
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="16"
width="16"
class="sizer [--sz:16px] h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
<p class="flex flex-row items-center mr-auto gap-x-2">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="28"
width="28"
class="h-7 w-7"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
Incorrect token
</p>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.right-4{right:1rem}.mr-auto{margin-right:auto}.flex{display:flex}.h-4{height:1rem}.h-7{height:1.75rem}.w-4{width:1rem}.w-7{width:1.75rem}.w-full{width:100%}.max-w-64{max-width:16rem}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-x-2{column-gap:0.5rem}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-solid{border-style:solid}.border-\[\#f85149\]{--tw-border-opacity:1;border-color:rgb(248 81 73 / var(--tw-border-opacity))}.bg-\[linear-gradient\(\#f851491a\2c \#f851491a\)\]{background-image:linear-gradient(#f851491a,#f851491a)}.p-1{padding:0.25rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pl-4{padding-left:1rem}.pr-14{padding-right:3.5rem}.text-base{font-size:1rem;line-height:1.5rem}.font-medium{font-weight:500}.text-\[\#b22b2b\]{--tw-text-opacity:1;color:rgb(178 43 43 / var(--tw-text-opacity))}.text-\[\#f85149\]{--tw-text-opacity:1;color:rgb(248 81 73 / var(--tw-text-opacity))}.opacity-40{opacity:0.4}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\[--sz\:16px\]{--sz:16px}.\[transition\:all_0\.5s_ease\]{transition:all 0.5s ease}.hover\:opacity-100:hover{opacity:1}.\[\&_svg\]\:text-\[\#b22b2b\] svg{--tw-text-opacity:1;color:rgb(178 43 43 / var(--tw-text-opacity))}