A Dialog component by Radix UI and Tailwind CSS

Dialog.tsx

import { useState, Fragment } from "react";
import { Transition } from "@headlessui/react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as Portal from "@radix-ui/react-portal";

interface DialogProps {
  trigger: React.ReactNode;
}

const Dialog: React.FC<DialogProps> = ({ trigger }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
      <Portal.Root>
        <Transition.Root show={isOpen}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <DialogPrimitive.Overlay
              forceMount
              className="fixed inset-0 z-20 bg-black/50"
            />
          </Transition.Child>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <DialogPrimitive.Content
              forceMount
              className="fixed top-[50%] left-[50%] z-50 w-[95vw] max-w-md -translate-x-[50%] -translate-y-[50%] rounded-lg bg-white p-4 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75 md:w-full"
            >
              <div className="mb-2 flex items-center justify-between">
                <DialogPrimitive.Title className="text-sm font-medium text-gray-900">
                  Title
                </DialogPrimitive.Title>
                <DialogPrimitive.Close>×</DialogPrimitive.Close>
              </div>
              <div className="bg-white">
                <div className="flex items-center"></div>
                <div>
                  <p className="mb-2">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Etiam pharetra cursus nibh, vel fringilla libero auctor vel.
                    Maecenas vel ultricies felis. Donec ac leo ante.
                    Pellentesque ultricies arcu sodales tellus lacinia finibus.
                  </p>
                  <p className="mb-2">
                    Curabitur mattis ipsum velit, in mollis ipsum laoreet non.
                    Suspendisse ullamcorper bibendum felis a ullamcorper.
                  </p>
                  <p className="mb-2">
                    Curabitur mattis ipsum velit, in mollis ipsum laoreet non.
                    Suspendisse ullamcorper bibendum felis a ullamcorper.
                  </p>
                </div>
                <DialogPrimitive.Close>
                  <button className="rounded border-gray-600 bg-black py-1 px-4 font-bold text-white transition hover:border-gray-400 hover:bg-gray-700">
                    Save
                  </button>
                </DialogPrimitive.Close>
              </div>
            </DialogPrimitive.Content>
          </Transition.Child>
        </Transition.Root>
      </Portal.Root>
    </DialogPrimitive.Root>
  );
};

export default Dialog;