Notus React Alerts
Made with Tailwind CSS, they are elements that provide contextual feedback messages for user actions. The notification is a simple colored block meant to draw the attention to the user about something.
Examples
Static Alert
blueGray! This is a blueGray alert - check it out!
red! This is a red alert - check it out!
orange! This is a orange alert - check it out!
amber! This is a amber alert - check it out!
emerald! This is a emerald alert - check it out!
teal! This is a teal alert - check it out!
lightBlue! This is a lightBlue alert - check it out!
indigo! This is a indigo alert - check it out!
purple! This is a purple alert - check it out!
pink! This is a pink alert - check it out!
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-blueGray-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">blueGray!</b> This is a blueGray alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">red!</b> This is a red alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-orange-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">orange!</b> This is a orange alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-amber-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">amber!</b> This is a amber alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-emerald-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">emerald!</b> This is a emerald alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-teal-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">teal!</b> This is a teal alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-lightBlue-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">lightBlue!</b> This is a lightBlue alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-indigo-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">indigo!</b> This is a indigo alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-purple-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">purple!</b> This is a purple alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
<div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-pink-500">
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell"></i>
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">pink!</b> This is a pink alert - check it out!
</span>
<button className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>
Closing (Dynamic) Alert
blueGray! This is a blueGray alert - check it out!
red! This is a red alert - check it out!
orange! This is a orange alert - check it out!
amber! This is a amber alert - check it out!
emerald! This is a emerald alert - check it out!
teal! This is a teal alert - check it out!
lightBlue! This is a lightBlue alert - check it out!
indigo! This is a indigo alert - check it out!
purple! This is a purple alert - check it out!
pink! This is a pink alert - check it out!
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-blueGray-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">blueGray!</b> This is a blueGray alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">red!</b> This is a red alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-orange-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">orange!</b> This is a orange alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-amber-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">amber!</b> This is a amber alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-emerald-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">emerald!</b> This is a emerald alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-teal-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">teal!</b> This is a teal alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-lightBlue-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">lightBlue!</b> This is a lightBlue alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-indigo-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">indigo!</b> This is a indigo alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-purple-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">purple!</b> This is a purple alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;
import React from "react";
const Alert = () => {
const [showAlert, setShowAlert] = React.useState(true);
return (
<>
{showAlert ? (
<div
className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-pink-500"
>
<span className="text-xl inline-block mr-5 align-middle">
<i className="fas fa-bell" />
</span>
<span className="inline-block align-middle mr-8">
<b className="capitalize">pink!</b> This is a pink alert -
check it out!
</span>
<button
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>
</button>
</div>
) : null}
</>
);
};
export default Alert;