Warning Alert
A vibrant, customizable Warning Alert component designed with TailwindCSS for clear, responsive, and accessible cautionary messages.
Example
This is a warning variant of the alert!
example.tsx
export function Alert() {
return (
<div className="border-2 border-[#FBC02D] bg-[#111111] px-3 md:px-5 py-1 md:py-3 gap-[10px] rounded-[10px] flex items-center justify-start min-w-max">
<svg
width="22"
height="22"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 7.5V10.625M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10ZM10 13.125H10.0067V13.1317H10V13.125Z"
stroke="#FBC02D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="text-[#FBC02D] text-[12px] md:text-[14px] lg:text-[16px]">
This is a warning variant of the alert!
</p>
</div>
);
}
Error Alert
A striking, customizable Error Alert component designed with TailwindCSS for clear, responsive, and accessible error notifications.
Example
This is a warning variant of the alert!
example.tsx
export function ErrorAlert() {
return (
<div className="border-2 border-[#D32F2F] bg-[#111111] px-3 md:px-5 py-1 md:py-3 gap-[10px] rounded-[10px] flex items-center justify-start min-w-max">
<svg
width="22"
height="22"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 7.5V10.625M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10ZM10 13.125H10.0067V13.1317H10V13.125Z"
stroke="#D32F2F"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="text-[#D32F2F] text-[12px] md:text-[14px] lg:text-[16px]">
This is a warning variant of the alert!
</p>
</div>
);
}
Info Alert
A sleek, customizable Info Alert component crafted with TailwindCSS for clear, responsive, and accessible informational messages.
Example
This is an info variant of the alert!
example.tsx
export function InfoAlert() {
return (
<div className="border-2 border-[#1565C0] bg-[#111111] px-3 md:px-5 py-1 md:py-3 gap-[10px] rounded-[10px] flex items-center justify-start min-w-max">
<svg
width="22"
height="22"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.375 9.375L9.40917 9.35833C9.51602 9.30495 9.63594 9.2833 9.75472 9.29596C9.8735 9.30862 9.98616 9.35505 10.0794 9.42976C10.1726 9.50446 10.2424 9.60432 10.2806 9.71749C10.3189 9.83066 10.3238 9.95242 10.295 10.0683L9.705 12.4317C9.67595 12.5476 9.68078 12.6695 9.71891 12.7828C9.75704 12.8961 9.82687 12.9961 9.92011 13.071C10.0134 13.1458 10.1261 13.1923 10.245 13.205C10.3639 13.2177 10.4839 13.196 10.5908 13.1425L10.625 13.125M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10ZM10 6.875H10.0067V6.88167H10V6.875Z"
stroke="#1565C0"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="text-[#1565C0] text-[12px] md:text-[14px] lg:text-[16px]">
This is an info variant of the alert!
</p>
</div>
);
}
Success Alert
A polished, customizable Success Alert component engineered with TailwindCSS for clear, responsive, and accessible success notifications.
Example
This is an success variant of the alert!
example.tsx
export function SuccessAlert() {
return (
<div className="border-2 border-[#4BB543] bg-[#111111] px-3 md:px-5 py-1 md:py-3 gap-[10px] rounded-[10px] flex items-center justify-start min-w-max">
<svg xmlns="http://www.w3.org/2000/svg"
height="22"
width="22"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="#4BB543"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<p className="text-[#4BB543] text-[12px] md:text-[14px] lg:text-[16px]">
This is an success variant of the alert!
</p>
</div>
);
}
