Reusable TailwindCSS Styled Alert Component with className. Its meant to work with TaildwindCSS and GatsbyJS.

README.md

How to run recipe

This recipe requires the tailwindcss recipe

gatsby recipes https://gist.githubusercontent.com/RafaelDavisH/84e07742404dcca0cc4380e71f82a4aa/raw/43ac08e432cabc9eea29a5b5e1c3ed00aea67733/alert-recipe.mdx --install

To Learn more about Gatsby Recipes

Gatsby Recipes

Note: Gatsby Recipes are experimental.

alert-recipe.mdx

Set Alert component and sample page

This Recipe requires tailwindcss recipe

---

Alert Component - styled with TaildwindCSS

• Four Alerts available: Warning, Success, Info, and Error
• To access any alert 'alertType' prop needs to be passed
• Sample-alert.js shows all four alert types with all possible props.

---

Sample page

Alert.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;

sample-alert.js

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

import "../styles/tailwind.css";

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>
  );
}