ModalView.module.css

.Overlay {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.Content {
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
    0 8px 38px 7px rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
  left: 50%;
  max-height: 80vh;
  max-width: 90vw;
  overflow: auto;
  padding: 32px;
  position: fixed;
  top: 50%;
  transform: translate(-50%);
  width: 600px;
  z-index: 2;
}
.Close {
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: block;
  fill: rgba(0, 0, 0, 1);
  height: 40px;
  margin: -24px -24px 0 auto;
  padding: 8px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.6, 1);
  width: 40px;
}
.Close:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

ModalView.tsx

import classes from "./ModalView.module.css";

interface IModalViewProps {
  onClose: () => void;
  children: React.ReactNode;
}

const ModalView: React.FC<IModalViewProps> = ({ onClose, children }) => (
  <>
    <button
      className={classes.Overlay}
      onClick={onClose}
      aria-label="Close the popin"
    />

    <div className={classes.Content}>
      <button
        className={classes.Close}
        onClick={onClose}
        aria-label="Close the popin"
      >
        <svg viewBox="0 0 24 24">
          <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
        </svg>
      </button>
      {children}
    </div>
  </>
);

export default ModalView;