How can I show a modal using an animation with Tailwind and react.js?

I am trying when I click on a modal to have an animation to show the modal but I don’t achieve to do that using Tailwind and react.

Here is my code :

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Wrapper from "./Wrapper";
import Input from "./Input";

import "./styles.css";
import Button from "./Button";
import Modal from "./Modal";

function App() {
  const [showModal, setShowModal] = useState(false);
  const handleShowModal = useCallback(() => {
    setShowModal(!showModal);
  }, [showModal]);
  const handleCloseModal = useCallback(() => {
    setShowModal(false);
  }, []);
  return (
    <div className="p-4">
      <h1 className="text-red-500 text-center">PlayGround</h1>
      <Wrapper className="p-2">
        <Input />
      </Wrapper>
      <Wrapper className="p-2">
        <Button onClick={handleShowModal}>Show Modal</Button>
        {showModal && <Modal onCancel={handleCloseModal} />}
      </Wrapper>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And you can see my full code here :

my full project

I would like something like that :

the goal

How can I do that ?

Thank you very much !