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

lightBlue! This is a lightBlue 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

lightBlue! This is a lightBlue 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;