Headless UI Dialog

ModalDialog.js

import { Dialog } from '@headlessui/react';

const ModalDialog = ({ isOpen, setIsOpen }) => {
  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <div className="flex items-center justify-center min-h-screen">
        <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
        <div className="relative bg-white rounded max-w-sm mx-auto p-8">
          <Dialog.Title className="text-xl">Title of dialog</Dialog.Title>
          <Dialog.Description>
            Description of dialog contents.
          </Dialog.Description>
          <button
            className="border-black border-solid border rounded mx-2 mt-8 py-1 px-2"
            onClick={() => setIsOpen(false)}
          >
            Cancel
          </button>
          <button
            className="border-black border-solid border rounded mx-2 mt-8 py-1 px-2"
            onClick={() => setIsOpen(false)}
          >
            Confirm
          </button>
        </div>
      </div>
    </Dialog>
  );
};

export default ModalDialog;