NextJS Alert Message Tutorial with Tailwind CSS

In this tutorial, we will create alert message in next js with tailwind css. First you need to setup next js 13 with tailwind css project.

1. Create next js with tailwind css simple alert message primary, secondary, success, warning, error.

export default function Home() {
  return (
    <div className="flex flex-col gap-4">
      <div className="rounded-md bg-blue-50 p-4 text-sm text-blue-500">
        A simple primary alert—check it out!
      </div>
      <div className="rounded-md bg-gray-50 p-4 text-sm text-gray-500">
        A simple secondary alert—check it out!
      </div>
      <div className="rounded-md bg-green-50 p-4 text-sm text-green-500">
        A simple success alert—check it out!
      </div>
      <div className="rounded-md bg-yellow-50 p-4 text-sm text-yellow-500">
        A simple Warning alert—check it out!
      </div>
      <div className="rounded-md bg-red-50 p-4 text-sm text-red-500">
        A simple Error alert—check it out!
      </div>
    </div>
  );
}

2. Next js with tailwind css alert message with icon.

export default function Home() {
    return (
      <div className="flex flex-col gap-4">
        <div className="flex rounded-md bg-blue-50 p-4 text-sm text-blue-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5 mr-1"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
            />
          </svg>
          A simple primary alert—check it out!
        </div>
        <div className="flex rounded-md bg-green-50 p-4 text-sm text-green-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5 mr-1"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          A simple success alert—check it out!
        </div>
        <div className="flex rounded-md bg-yellow-50 p-4 text-sm text-yellow-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5 mr-1"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
            />
          </svg>
          A simple Warning alert—check it out!
        </div>
        <div className="flex rounded-md bg-red-50 p-4 text-sm text-red-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5 mr-1"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          A simple Error alert—check it out!
        </div>
      </div>
    );
  }

3. Next js with tailwind css alert message cross x close button using useState.

"use client";

import * as React from "react";

export default function Home() {
  const [alertVisible, setAlertVisible] = React.useState(true);

  const closeAlert = () => {
    setAlertVisible(false);
  };

  return (
    <div className={`flex flex-col gap-4 ${alertVisible ? "" : "hidden"}`}>
      {alertVisible && (
        <div className="flex rounded-md bg-blue-50 p-4 text-sm text-blue-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-5 h-5 mr-1"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
            />
          </svg>
          <div> A simple primary alert—check it out! </div>
          <button
            onClick={closeAlert}
            className="ml-auto mr-2 text-blue-500 hover:text-blue-700"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="w-5 h-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      )}
    </div>
  );
}

Aaronn