common_helper.js

export function getModalStyle() {
  const customStyles = {
    overlay: {
      backgroundColor: "rgba(0,0,0,0.5)",
    },
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      borderRadius: "1.5rem",
      padding: "20px 0px",
    },
  };

  return customStyles;
}

globals.css

/* modal style */

.modal-header {
  @apply px-5;
}

.modal-body {
  @apply px-5;
}

.modal-footer {
  @apply border-t border-gray-200 px-5 pt-4;
}

@media screen and (min-width: 992px) { 
    .ReactModal__Content {
        max-width: 600px;
    }
}

@media screen and (min-width: 576px) and (max-width: 991px) { 
    .ReactModal__Content {
        max-width: 70%;
    }
}

@media screen and (max-width: 575px) { 
    .ReactModal__Content {
        max-width: 95%;
    }
}

Home.js

import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import { getModalStyle } from "helpers/common_helper";

export default function Home() {
  const [modalIsOpen, setIsOpen] = useState(false);

  // modal methods

  function openModal() {
    setIsOpen(true);
  }
  
  function closeModal() {
    setIsOpen(false);
  }

  function afterOpenModal() {}

  function afterCloseModal() {}
  
  return (
      <>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onAfterClose={afterCloseModal}
        onRequestClose={closeModal}
        style={getModalStyle()}
        contentLabel="Example Modal"
      >
        <button
          className="absolute top-[10px] right-[20px]"
          onClick={closeModal}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>

        <div className="modal-header">
          <h3 className="text-2xl mb-8">
            Modal Header
          </h3>
        </div>

        <div className="modal-body">
          
        </div>
        <div className="modal-footer">
          <div className="text-center">
            <button
              onClick={(e) => doSomething(e)}
              type="button"
            >
              Submit
            </button>
          </div>
        </div>
      </Modal>
      </>  
  )
}