Modal Component purely in ReactJS and TailwindCSS

App.jsx

import { CheckCircle } from "react-feather"
import Modal from "./components/Modal"
import { useState } from "react"

function App() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <main className="App">
        <button className="btn btn-success" onClick={() => setOpen(true)}>
          <CheckCircle size={30} /> Continue
        </button>
        <Modal open={open} onClose={() => setOpen(false)}>
          <div className="text-center w-56">

            <CheckCircle size={56} className="mx-auto text-green-500" />
            <div className="mx-auto my-4 w-48">
              <h3 className="text-lg font-black text-gray-800">Confirm to Continue</h3>
              <p className="text-sm text-gray-500">Are you sure to Continue</p>
            </div>
            <div className="flex gap-4">
              <button className="btn btn-success w-full">Continue</button>
              <button onClick={() => setOpen(false)} className="btn btn-light w-full">Cancel</button>

            </div>
          </div>
        </Modal>
      </main>
    </>
  )
}

export default App

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .App {
        @apply flex items-center justify-center min-h-screen bg-gray-50;
    }

    .btn {
        @apply flex gap-2 items-center justify-center py-2 px-4 font-semibold shadow-md rounded-lg;
    }

    .btn.btn-light {
        @apply bg-white text-gray-500;
    }

    .btn.btn-success {
        @apply text-white bg-green-600 shadow-green-400/10
    }
}

Modal.jsx

import { X } from "react-feather";

export default function Modal({ open, onClose, children }) {
    return (
        //backdrop
        <div onClick={onClose}
            className={`fixed inset-0 flex justify-center items-center transition-colors ${open ? "visible bg-black/20" : "invisible"}`}
        >

            {/* modal */}

            <div
                onClick={(e) => e.stopPropagation()}
                className={`bg-white rounded-xl shadow p-6 transition-all ${open ? "scale-100 opacity-100" : "scale-125 opacity-0"}`}>

                <button
                    onClick={onClose}
                    className="absolute top-2 right-2 p-1 rounded-lg text-gray-400 bg-white hover:bg-gray-50 hover:text-gray-600">
                    <X />
                </button>

                {children}
            </div>
        </div>
    )
}