HTMX Modal tailwind test

HTML

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: 0 },
                            '100%': { opacity: 1 }
                        },
                        fadeOut: {
                            '0%': { opacity: 1 },
                            '100%': { opacity: 0 }
                        },
                        zoomIn: {
                            '0%': { transform: 'scale(0.9)' },
                            '100%': { transform: 'scale(1)' }
                        },
                        zoomOut: {
                            '0%': { transform: 'scale(1)' },
                            '100%': { transform: 'scale(0.9)' }
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 150ms linear',
                        'fade-out': 'fadeOut 150ms linear',
                        'zoom-in': 'zoomIn 150ms linear',
                        'zoom-out': 'zoomOut 150ms linear'
                    }
                }
            }
        }
    </script>
    <script src="https://demo.htmx.org"></script>

</head>

<body>
    <button hx-get="/modal" hx-target="body" hx-swap="beforeend">Open a Modal</button>

    <template url="/modal">
        <div id="modal-body" _="on closeModal
                                    toggle .animate-fade-in .animate-fade-out
                                    toggle .animate-zoom-in .animate-zoom-out on #modal-content
                                    wait for animationend
                                    remove me"
            class="fixed z-[1000] inset-0 bg-gray-500 bg-opacity-50 flex flex-col items-center animate-fade-in">
            <div...