<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s pd-x-8 pd-y-5 "> <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> <span><i class="fa-solid fa-xmark"></i></span> </div> <div class="bg-red-2 flex items-center text-color-red-9 justify-btw rounded-s pd-x-8 pd-y-5 "> <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span> <span><i class="fa-solid fa-xmark"></i></span> </div> <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 "> <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> <span><i class="fa-solid fa-xmark"></i></span> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter