Tailwind CSS Alerts Components
There are many ways to show warning, success or error messages with Tailwind CSS. Here are the all essential alert snippets you need crafted by TailGrids for Tailwind CSS. Tailwind CSS also allows websites to show errors, warnings, and success messages. If you are looking for alert Tailwind components that have been professionally designed by experts, check out TailGrid! On TailGrid, you can choose from a total of 6 different attention alert styles that have all been designed and crafted with precision and authenticity. These alerts or notifications are perfect to showcase different types of notifications such as payment success, errors, or warning messages. Moreover, these alert templates are based on Tailwind CSS UI components and Tailwind sections, so you can rest assured that the final template will be in line with the aesthetics of your website besides making it extremely user-friendly for your audiences. Moreover, since all these alert components are free on TailGrid, you can choose the one you like the most according to your preference.
Success Alert Style 2
FREE
FREE
Success Alert Style 2<div
class="flex w-full rounded-lg border-l-[6px] border-[#34D399] bg-[#34D399] bg-opacity-[15%] px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]"
>
<svg
width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
fill="white"
stroke="white"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-lg font-semibold text-dark">
Message Sent Successfully
</h5>
<p class="text-base leading-relaxed text-body-color">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
Warning Alert Style 2
FREE
FREE
Warning Alert Style 2<div
class="flex w-full rounded-lg border-l-[6px] border-[#F87171] bg-[#F87171] bg-opacity-[15%] px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]"
>
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#ffffff"
stroke="#ffffff"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-base font-semibold text-[#B45454]">
There were 1 errors with your submission
</h5>
<ul class="list-inside list-disc">
<li class="text-base leading-relaxed text-[#CD5D5D]">
Lorem Ipsum is simply dummy text of the printing
</li>
</ul>
</div>
</div>
Attention Alert Style 1
FREE
FREE
Attention Alert Style 1<div
class="flex w-full rounded-lg border-l-[6px] border-transparent bg-white px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-warning bg-opacity-30"
>
<svg
width="19"
height="16"
viewBox="0 0 19 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill="#FBBF24"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-lg font-semibold text-[#9D5425]">Attention needed</h5>
<p class="text-base leading-relaxed text-[#D0915C]">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when
</p>
</div>
</div>
Attention Alert Style 2
FREE
FREE
Attention Alert Style 2<div
class="flex w-full rounded-lg border-l-[6px] border-warning bg-warning bg-opacity-[15%] px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-warning bg-opacity-30"
>
<svg
width="19"
height="16"
viewBox="0 0 19 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill="#FBBF24"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-lg font-semibold text-[#9D5425]">Attention needed</h5>
<p class="text-base leading-relaxed text-[#D0915C]">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when
</p>
</div>
</div>
Success Alert Style 1
FREE
FREE
Success Alert Style 1<div
class="flex w-full rounded-lg border-l-[6px] border-transparent bg-white px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399] bg-opacity-30"
>
<svg
width="17"
height="12"
viewBox="0 0 17 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.281 0.813685L16.2688 0.798941L16.2555 0.785173C15.8893 0.406018 15.2974 0.404945 14.93 0.781955L6.27018 9.47967L2.09399 5.27433C1.7266 4.89706 1.13447 4.89804 0.76826 5.27729C0.41058 5.6477 0.41058 6.23243 0.76826 6.60284L0.768224 6.60287L0.773158 6.60784L5.18177 11.0472C5.47504 11.3494 5.87368 11.5 6.24551 11.5C6.64809 11.5 7.02039 11.3448 7.30901 11.0475L16.1938 2.12381C16.5881 1.75601 16.5842 1.18007 16.281 0.813685Z"
fill="#34D399"
stroke="#34D399"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-lg font-semibold text-dark">
Message Sent Successfully
</h5>
<p class="mb-6 text-base leading-relaxed text-body-color">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when
</p>
<div class="flex">
<a
href="javascript:void(0)"
class="mr-6 inline-block text-sm font-medium text-[#34D399]"
>
View Status
</a>
<button class="text-sm font-medium text-body-color">Dismiss</button>
</div>
</div>
</div>
Warning Alert Style 1
FREE
FREE
Warning Alert Style 1<div
class="flex w-full rounded-lg border-l-[6px] border-transparent bg-white px-7 py-8 shadow-md md:p-9"
>
<div
class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171] bg-opacity-[15%]"
>
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#F87171"
stroke="#F87171"
></path>
</svg>
</div>
<div class="w-full">
<h5 class="mb-3 text-base font-semibold text-[#B45454]">
There were 2 errors with your submission
</h5>
<ul class="list-inside list-disc">
<li class="text-base leading-relaxed text-[#CD5D5D]">
Lorem Ipsum is simply dummy text of the printing
</li>
<li class="text-base leading-relaxed text-[#CD5D5D]">
Industry's standard dummy text ever since the 1500s, when
</li>
</ul>
</div>
</div>
Warning Alert Style 3
FREE
FREE
Warning Alert Style 3<div class="rounded-md bg-[#FFF0F0] p-4">
<p class="flex items-center text-sm font-medium text-[#BC1C21]">
<span class="pr-3">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#BC1C21"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 5.54922C7.54253 5.54922 5.5502 7.54155 5.5502 9.99922C5.5502 12.4569 7.54253 14.4492 10.0002 14.4492C12.4579 14.4492 14.4502 12.4569 14.4502 9.99922C14.4502 7.54155 12.4579 5.54922 10.0002 5.54922ZM4.4502 9.99922C4.4502 6.93404 6.93502 4.44922 10.0002 4.44922C13.0654 4.44922 15.5502 6.93404 15.5502 9.99922C15.5502 13.0644 13.0654 15.5492 10.0002 15.5492C6.93502 15.5492 4.4502 13.0644 4.4502 9.99922Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 7.44922C10.304 7.44922 10.5502 7.69546 10.5502 7.99922V9.99922C10.5502 10.303 10.304 10.5492 10.0002 10.5492C9.69644 10.5492 9.4502 10.303 9.4502 9.99922V7.99922C9.4502 7.69546 9.69644 7.44922 10.0002 7.44922Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4502 11.9992C9.4502 11.6955 9.69644 11.4492 10.0002 11.4492H10.0052C10.309 11.4492 10.5552 11.6955 10.5552 11.9992C10.5552 12.303 10.309 12.5492 10.0052 12.5492H10.0002C9.69644 12.5492 9.4502 12.303 9.4502 11.9992Z" fill="white"></path>
</svg>
</span>
Uh oh, something went wrong
</p>
</div>
Attention Alert Style 3
FREE
FREE
Attention Alert Style 3<div class="border-stroke flex items-center rounded-md border border-l-[8px] border-l-[#F0A92D] bg-white p-5 pl-8">
<div class="mr-5 flex h-[36px] w-full max-w-[36px] items-center justify-center rounded-full bg-[#F0A92D]">
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.42572 16H16.5811C17.6404 16 18.3233 14.9018 17.844 13.9735L10.2664 0.770573C9.7439 -0.256858 8.24852 -0.256858 7.72606 0.770573L0.148374 13.9735C-0.316489 14.8998 0.366408 16 1.42572 16ZM10.1923 12.9298C10.1923 13.6155 9.68425 14.1433 8.95815 14.1433C8.23206 14.1433 7.724 13.6155 7.724 12.9298V12.9015C7.724 12.2159 8.23206 11.688 8.95815 11.688C9.68425 11.688 10.1923 12.2159 10.1923 12.9015V12.9298ZM8.29171 4.01062H9.7151C10.1059 4.01062 10.3383 4.33826 10.2952 4.75288L9.66985 10.1186C9.62665 10.5049 9.36542 10.7455 9.00135 10.7455C8.63933 10.7455 8.37605 10.5028 8.33285 10.1186L7.70755 4.75288C7.66847 4.33826 7.9009 4.01062 8.29171 4.01062Z" fill="white"></path>
</svg>
</div>
<div class="flex w-full items-center justify-between">
<div>
<h3 class="mb-1 text-lg font-medium text-black">
Opps! something went wrong
</h3>
<p class="text-body-color text-sm">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
</div>
<div>
<button class="hover:text-danger text-[#ACACB0]">
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8839 5.11612C19.372 5.60427 19.372 6.39573 18.8839 6.88388L6.88388 18.8839C6.39573 19.372 5.60427 19.372 5.11612 18.8839C4.62796 18.3957 4.62796 17.6043 5.11612 17.1161L17.1161 5.11612C17.6043 4.62796 18.3957 4.62796 18.8839 5.11612Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11612 5.11612C5.60427 4.62796 6.39573 4.62796 6.88388 5.11612L18.8839 17.1161C19.372 17.6043 19.372 18.3957 18.8839 18.8839C18.3957 19.372 17.6043 19.372 17.1161 18.8839L5.11612 6.88388C4.62796 6.39573 4.62796 5.60427 5.11612 5.11612Z"></path>
</svg>
</button>
</div>
</div>
</div>
Information Alert Style 1
FREE
FREE
Information Alert Style 1<div class="border-stroke flex items-center rounded-md border border-l-[8px] border-l-[#007BC3] bg-white p-5 pl-8">
<div class="mr-5 flex h-[36px] w-full max-w-[36px] items-center justify-center rounded-full bg-[#007BC3]">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.58333C5.90389 2.58333 2.58333 5.90389 2.58333 10C2.58333 14.0961 5.90389 17.4167 10 17.4167C14.0961 17.4167 17.4167 14.0961 17.4167 10C17.4167 5.90389 14.0961 2.58333 10 2.58333ZM0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2011 6.76824C9.83259 6.70503 9.45358 6.77428 9.13121 6.96374C8.80884 7.1532 8.56393 7.45063 8.43984 7.80337C8.27184 8.28094 7.7485 8.5319 7.27093 8.3639C6.79336 8.1959 6.5424 7.67256 6.7104 7.19499C6.97815 6.43383 7.50665 5.792 8.20229 5.38316C8.89793 4.97433 9.7158 4.82489 10.5111 4.9613C11.3063 5.0977 12.0277 5.51117 12.5473 6.12845C13.0668 6.74562 13.3512 7.52671 13.3501 8.33343C13.3497 9.65287 12.3721 10.5168 11.6919 10.9702C11.3238 11.2156 10.9623 11.3957 10.6964 11.5139C10.5621 11.5736 10.4489 11.6189 10.3672 11.6501C10.3263 11.6657 10.293 11.6778 10.2686 11.6864L10.2389 11.6969L10.2293 11.7001L10.2258 11.7013L10.2245 11.7018C10.2242 11.7018 10.2233 11.7021 9.93345 10.8325L10.2233 11.7021C9.74305 11.8622 9.22392 11.6027 9.06383 11.1224C8.90392 10.6427 9.16271 10.1242 9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343L9.65444 9.95905C9.66671 9.95468 9.68713 9.94728 9.71455 9.93683C9.76952 9.91589 9.85167 9.88309 9.95178 9.8386C10.1546 9.74845 10.4181 9.61608 10.675 9.4448C11.2446 9.06504 11.5168 8.67922 11.5168 8.33251L11.5168 8.33114C11.5173 7.95722 11.3855 7.59517 11.1447 7.30912C10.9039 7.02306 10.5697 6.83145 10.2011 6.76824ZM9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343V9.96343ZM13.3501 8.33343C13.3501 8.33358 13.3501 8.33328 13.3501 8.33343L12.4335 8.33251H13.3501C13.3501 8.33282 13.3501 8.33312 13.3501 8.33343Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.08301 14.1667C9.08301 13.6604 9.49341 13.25 9.99967 13.25H10.008C10.5143 13.25 10.9247 13.6604 10.9247 14.1667C10.9247 14.6729 10.5143 15.0833 10.008 15.0833H9.99967C9.49341 15.0833 9.08301 14.6729 9.08301 14.1667Z" fill="white"></path>
</svg>
</div>
<div class="flex w-full items-center justify-between">
<div>
<h3 class="mb-1 text-lg font-medium text-black">
Did you know?
</h3>
<p class="text-body-color text-sm">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
</div>
<div>
<button class="hover:text-danger text-[#ACACB0]">
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8839 5.11612C19.372 5.60427 19.372 6.39573 18.8839 6.88388L6.88388 18.8839C6.39573 19.372 5.60427 19.372 5.11612 18.8839C4.62796 18.3957 4.62796 17.6043 5.11612 17.1161L17.1161 5.11612C17.6043 4.62796 18.3957 4.62796 18.8839 5.11612Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11612 5.11612C5.60427 4.62796 6.39573 4.62796 6.88388 5.11612L18.8839 17.1161C19.372 17.6043 19.372 18.3957 18.8839 18.8839C18.3957 19.372 17.6043 19.372 17.1161 18.8839L5.11612 6.88388C4.62796 6.39573 4.62796 5.60427 5.11612 5.11612Z"></path>
</svg>
</button>
</div>
</div>
</div>
Success Alert Style 3
FREE
FREE
Success Alert Style 3<div class="rounded-md bg-[#C4F9E2] p-4">
<p class="flex items-center text-sm font-medium text-[#004434]">
<span class="pr-3">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#00B078"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1203 6.78954C14.3865 7.05581 14.3865 7.48751 14.1203 7.75378L9.12026 12.7538C8.85399 13.02 8.42229 13.02 8.15602 12.7538L5.88329 10.4811C5.61703 10.2148 5.61703 9.78308 5.88329 9.51682C6.14956 9.25055 6.58126 9.25055 6.84753 9.51682L8.63814 11.3074L13.156 6.78954C13.4223 6.52328 13.854 6.52328 14.1203 6.78954Z" fill="white"></path>
</svg>
</span>
Your item has been added successfully
</p>
</div>
Success Alert Style 4
FREE
FREE
Success Alert Style 4<div class="border-stroke flex items-center rounded-md border border-l-[8px] border-l-[#00B078] bg-white p-5 pl-8">
<div class="mr-5 flex h-[36px] w-full max-w-[36px] items-center justify-center rounded-full bg-[#00B078]">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4038 4.22274C17.883 4.70202 17.883 5.47909 17.4038 5.95837L8.40377 14.9584C7.92449 15.4376 7.14742 15.4376 6.66814 14.9584L2.57723 10.8675C2.09795 10.3882 2.09795 9.61111 2.57723 9.13183C3.05651 8.65255 3.83358 8.65255 4.31286 9.13183L7.53595 12.3549L15.6681 4.22274C16.1474 3.74346 16.9245 3.74346 17.4038 4.22274Z" fill="white"></path>
</svg>
</div>
<div class="flex w-full items-center justify-between">
<div>
<h3 class="mb-1 text-lg font-medium text-black">
Message Sent Successfully
</h3>
<p class="text-body-color text-sm">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
</div>
<div>
<button class="hover:text-danger text-[#ACACB0]">
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8839 5.11612C19.372 5.60427 19.372 6.39573 18.8839 6.88388L6.88388 18.8839C6.39573 19.372 5.60427 19.372 5.11612 18.8839C4.62796 18.3957 4.62796 17.6043 5.11612 17.1161L17.1161 5.11612C17.6043 4.62796 18.3957 4.62796 18.8839 5.11612Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11612 5.11612C5.60427 4.62796 6.39573 4.62796 6.88388 5.11612L18.8839 17.1161C19.372 17.6043 19.372 18.3957 18.8839 18.8839C18.3957 19.372 17.6043 19.372 17.1161 18.8839L5.11612 6.88388C4.62796 6.39573 4.62796 5.60427 5.11612 5.11612Z"></path>
</svg>
</button>
</div>
</div>
</div>