- Published on
16 Tailwind Alert components 2023
Tailwind: Alerts Components
Here are 16 Tailwind Alerts components along with their HTML and Tailwind classes:
1. Success Alert:
Success! Your data has been saved.
<div
class="relative rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700"
role="alert"
>
<strong class="font-bold">Success!</strong>
<span class="block sm:inline">Your data has been saved.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg
class="h-6 w-6 fill-current text-green-500"
role="button"
viewBox="0 0 20 20"
>
<title>Close</title>
<path
d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
/>
</svg>
</span>
</div>
2. Information Alert:
Information Alert
This is an example of an information alert.
<div
class="rounded-b border-t-4 border-blue-500 bg-blue-100 px-4 py-3 text-blue-900 shadow-md"
role="alert"
>
<div class="flex">
<div class="py-1">
<svg
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-info-circle-fill mr-2 text-blue-500"
viewBox="0 0 16 16"
>
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.5 4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.5a.5.5 0 0 1 .5-.5zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<p class="font-bold">Information Alert</p>
<p class="text-sm">This is an example of an information alert.</p>
</div>
</div>
</div>
3. Warning Alert:
Warning
This is an example of a warning alert.
<div
class="border-l-4 border-yellow-500 bg-yellow-100 p-4 text-yellow-700"
role="alert"
>
<p class="font-bold">Warning</p>
<p>This is an example of a warning alert.</p>
</div>
4. Error Alert:
Error! Your data has not been saved.
<div
class="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
<strong class="font-bold">Error!</strong>
<span class="block sm:inline">Your data has not been saved.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg
class="h-6 w-6 fill-current text-red-500"
role="button"
viewBox="0 0 20 20"
>
<title>Close</title>
<path
d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
/>
</svg>
</span>
</div>
5. Square Success Alert:
Success!
Your data has been saved.
<div
class="rounded-b-2xl border-t border-b border-green-500 bg-green-100 px-4 py-3 text-green-700"
role="alert"
>
<p class="font-bold">Success!</p>
<p>Your data has been saved.</p>
</div>
6. Square Information Alert:
Information Alert
This is an example of an information alert.
<div
class="rounded-b-2xl border-t border-b border-blue-500 bg-blue-100 px-4 py-3 text-blue-700"
role="alert"
>
<p class="font-bold">Information Alert</p>
<p>This is an example of an information alert.</p>
</div>
7. Square Warning Alert:
Warning
This is an example of a warning alert.
<div
class="rounded-b-2xl border-t border-b border-yellow-500 bg-yellow-100 px-4 py-3 text-yellow-700"
role="alert"
>
<p class="font-bold">Warning</p>
<p>This is an example of a warning alert.</p>
</div>
8. Square Error Alert:
Error!
Your data has not been saved.
<div
class="rounded-b-2xl border-t border-b border-red-500 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
<p class="font-bold">Error!</p>
<p>Your data has not been saved.</p>
</div>
9. Success Alert with Icon:
Your data has been saved.
<div
class="relative rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700"
role="alert"
>
<span class="block sm:inline"
><svg
class="mr-4 h-6 w-6 fill-current text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg
>Your data has been saved.</span
>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg
class="h-6 w-6 fill-current text-green-500"
role="button"
viewBox="0 0 20 20"
>
<title>Close</title>
<path
d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
/>
</svg>
</span>
</div>
10. Information Alert with Icon:
Information Alert
This is an example of an information alert.
<div
class="rounded-b border-t-4 border-blue-500 bg-blue-100 px-4 py-3 text-blue-900 shadow-md"
role="alert"
>
<div class="flex">
<div class="py-1">
<svg
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-info-circle-fill mr-2 text-blue-500"
viewBox="0 0 16 16"
>
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.5 4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.5a.5.5 0 0 1 .5-.5zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<p class="font-bold">Information Alert</p>
<p class="text-sm">This is an example of an information alert.</p>
</div>
</div>
</div>
11. Warning Alert with Icon:
Warning
This is an example of a warning alert.
<div
class="border-l-4 border-yellow-500 bg-yellow-100 p-4 text-yellow-700"
role="alert"
>
<div class="flex">
<div class="py-1">
<svg
class="mr-4 h-6 w-6 fill-current text-yellow-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-9.293-1.707a1 1 0 0 0-1.414 1.414L8.586 10 7.293 11.293a1 1 0 1 0 1.414 1.414L10 11.414l1.293 1.293a1 1 0 1 0 1.414-1.414L11.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L10 8.586 8.707 7.293z"
/>
</svg>
</div>
<div>
<p class="font-bold">Warning</p>
<p>This is an example of a warning alert.</p>
</div>
</div>
</div>
12. Error Alert with Icon:
Your data has not been saved.
<div
class="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
<span class="block sm:inline"
><svg
class="mr-4 h-6 w-6 fill-current text-red-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-9.293-1.707a1 1 0 0 0-1.414 1.414L8.586 10 7.293 11.293a1 1 0 1 0 1.414 1.414L10 11.414l1.293 1.293a1 1 0 1 0 1.414-1.414L11.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L10 8.586 8.707 7.293z"
/></svg
>Your data has not been saved.</span
>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg
class="h-6 w-6 fill-current text-red-500"
role="button"
viewBox="0 0 20 20"
>
<title>Close</title>
<path
d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
/>
</svg>
</span>
</div>
13. Success Outline:
Success! Your data has been saved.
<div
class="relative rounded border border-green-500 bg-green-50 px-4 py-3 text-green-700"
role="alert"
>
<strong class="font-bold">Success!</strong>
<span class="block sm:inline">Your data has been saved.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg
class="h-6 w-6 fill-current text-green-500"
role="button"
viewBox="0 0 20 20"
>
<title>Close</title>
<path
d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
/>
</svg>
</span>
</div>
14. Warning Outline:
Warning
This is an example of a warning alert.
<div
class="rounded border border-yellow-500 bg-yellow-50 px-4 py-3 text-yellow-700"
role="alert"
>
<p class="font-bold">Warning</p>
<p>This is an example of a warning alert.</p>
</div>
15. Dark Success:
Success
Your data has been saved.
<div class="rounded-md bg-green-900 px-4 py-3 text-center text-white">
<p class="font-bold">Success</p>
<p>Your data has been saved.</p>
</div>
16. Dark Warning:
Warning
This is an example of a warning alert.
<div class="rounded-md bg-yellow-900 px-4 py-3 text-center text-white">
<p class="font-bold">Warning</p>
<p>This is an example of a warning alert.</p>
</div>
Previous Article
Next Article
Table of content