App.js

import React, { useState } from "react";
import CustomModal from "./components/CustomModal";

export default function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <>
      <div className="w-screen h-screen flex items-center justify-center">
        <button
          className="py-2 px-5 bg-blue-500 text-white"
          onClick={() => setShowModal(true)}
        >
          Open Modal
        </button>
      </div>
      <CustomModal visible={showModal} onClose={() => setShowModal(false)}>
        <div className="bg-white w-96 p-5 rounded">
          <h1 className="font-bold text-2xl text-blue-500">
            Subscribe for our newsletter
          </h1>
          <p className="py-1 text-gray-500">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos quasi
            quibusdam pariatur? Repellendus laudantium dignissimos.
          </p>
          <input
            placeholder="example@email.com"
            type="email"
            className="w-full border border-gray-500 p-1 mt-2 rounded "
          />
          <button className="mt-2 py-2 px-5 bg-blue-500 text-white">
            Subscribe
          </button>
        </div>
      </CustomModal>
    </>
  );
}

CustomModal.jsx

import React from "react";

export default function CustomModal({ children, visible, onClose }) {
  if (!visible) return null;

  const handleOnBackDropClick = (e) => {
    if (e.target.id === "backdrop") onClose && onClose();
  };

  return (
    <div
      id="backdrop"
      onClick={handleOnBackDropClick}
      className="bg-black bg-opacity-50 backdrop-blur-sm fixed inset-0 flex items-center justify-center"
    >
      {children}
    </div>
  );
}