toggleVisable.jsx

import * as React from "react";
import clsx from "clsx";

export default function ToggleMessage() {
  const [visible, setVisible] = React.useState(false);

  const toggleVisibility = () => {
    setVisible(!visible);
  };

  return (
    <div className="relative">
      <button
        className="bg-blue-500 text-white py-2 px-4 rounded"
        onClick={toggleVisibility}
      >
        Toggle Message
      </button>
      <section
        className={clsx(
          "bg-red-500 text-white shadow-lg shadow-black p-4 h-screen w-screen  md:w-[350px] z-50 fixed top-0 left-0 transition-transform duration-300",
          {
            "transform translate-x-0": visible,
            "transform -translate-x-full": !visible,
          }
        )}
      >
        The message is now visible!
        <button
          className="absolute top-0 right-0 p-2 text-white text-2xl"
          onClick={toggleVisibility}
        >
          &times;
        </button>
      </section>
    </div>
  );
}