پیشنمایش زنده
کد HTML
<div role="alert" class="max-w-[300px] p-2 bg-indigo-800 rounded-full items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex">
<span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts</span>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-75 h-4 w-4"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</div>
کد CSS
.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.max-w-\[300px\]{max-width:300px}.flex-auto{flex:1 1 auto}.items-center{align-items:center}.rounded-full{border-radius:9999px}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(55 48 163 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.p-2{padding:0.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.text-left{text-align:left}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.text-indigo-100{--tw-text-opacity:1;color:rgb(224 231 255 / var(--tw-text-opacity))}.opacity-75{opacity:0.75}@media (min-width: 1024px){.lg\:inline-flex{display:inline-flex}.lg\:rounded-full{border-radius:9999px}}