Responsive Modal component with React and Tailwindreact

Press Esc to exit this exercise.

import React, { useState } from 'react';

const Modal: React.FC = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const toggleModal = () => {
  setIsOpen(!isOpen);
  };

  return (
  <div>
    <button onClick={toggleModal}>Open Modal</button>
    {isOpen && (
    <div className="fixed inset-0 flex items-center justify-center z-10">
      <div className="absolute inset-0 bg-gray-900 opacity-50"></div>
      <div className="bg-white p-8 rounded shadow-md z-20">
      <span className="absolute top-0 right-0 p-2 cursor-pointer" onClick={toggleModal}>&times;</span>
      <p>Modal content goes here...</p>
      </div>
    </div>
    )}
  </div>
  );
};

export default Modal;