Reusable Alert Component styled with TailwindCSS

alerts.js

import React from "react";

const Alert = ({
  children,
  className = "",
  style,
  textColor,
  bgColor,
  borderColor,
  ...rest
}) => {
  const textColors = {
    red: "text-red-700",
    blue: "text-blue-700",
    green: "text-green-700"
  };
  const bgColors = {
    red: "bg-red-100",
    blue: "bg-blue-100",
    green: "bg-green-100"
  };
  const borderColors = {
    red: "border-red-400",
    blue: "border-blue-400",
    green: "border-green-400"
  };
  const textColorClass = textColors[textColor];
  const bgColorClass = bgColors[bgColor];
  const borderColorClass = borderColors[borderColor];
  return (
    <div
      className={` border px-4 py-3 rounded relative ${className} ${textColorClass} ${bgColorClass} ${borderColorClass}`}
      style={{...style }}
      {...rest}
    >
      <span className="block sm:inline">{children}</span>
      <span className="absolute top-0 bottom-0 right-0 px-4 py-3">
        <svg
          className={`fill-current h-6 w-6 ${textColorClass}`}
          role="button"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
        >
          <title>Close</title>
          <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
        </svg>
      </span>
    </div>
  );
};

export default Alert;

Alerts2.js

import React from "react";

const Alert = ({ children, className = "", style, alertType, ...rest }) => {
  const alertTypes = {
    error: [
      {
        textColor: "text-red-700",
        bgColor: "bg-red-100",
        borderColor: "border-red-400"
      }
    ],
    warning: [
      {
        textColor: "text-yellow-700",
        bgColor: "bg-yellow-100",
        borderColor: "border-green-400"
      }
    ],
    success: [
      {
        textColor: "text-green-700",
        bgColor: "bg-green-100",
        borderColor: "border-green-400"
      }
    ],
    info: [
      {
        textColor: "text-blue-700",
        bgColor: "bg-blue-100",
        borderColor: "border-blue-500"
      }
    ]
  };

  const alertTypeClass = alertTypes[alertType];
  
  return (
    <div
      className={` border px-4 py-3 rounded relative ${className} ${alertTypeClass[0].textColor} ${alertTypeClass[0].bgColor} ${alertTypeClass[0].borderColor}`}
      style={{ ...style }}
      {...rest}
    >
      <span className="block sm:inline">{children}</span>
      <span className="absolute top-0 bottom-0 right-0 px-4 py-3">
        <svg
          className={`fill-current h-6 w-6 ${alertTypeClass[0].textColor}`}
          role="button"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
        >
          <title>Close</title>
          <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
        </svg>
      </span>
    </div>
  );
};

export default Alert;

App.js

import React from "react";
import Alert from "./components/alert";

export default function App() {
  return (
    <div className="App p-2">
      <h1 className="text-xl text-indigo-800 font-bold text-center mb-4">
        Reusable Classic Alert Components styled with TailwindCSS
      </h1>
      <Alert className="mb-2" role="alert" style={{}} alertType="success">
        <strong>Well Done!</strong> You successfully read this important alert.
      </Alert>
      <Alert className="mb-2" role="alert" style={{}} alertType="error">
        <strong>Oh Snap!</strong> Change a few things up and try submitting
        again.
      </Alert>
      <Alert className="mb-2" role="alert" style={{}} alertType="warning">
        <strong>Warning!</strong> Better check yourself, you're not looking too
        good.
      </Alert>
      <Alert className="mb-2" role="alert" style={{}} alertType="info">
        <strong>Heads up!</strong> This alert needs your attention, but its not
        super important.
      </Alert>
    </div>
  );
}

Note: Text, background, and border colors are customizable, the rest are set as default alert styles.

previous code would have not work in production because purgecss wouldn't recognize the classNames. Also, these updates are to set 3 different color schemes for the Alert - Green, Blue, and Red.