calculator/index.html

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
    <title>Calculator</title>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('calculator', () => ({
                //TODO: ...
            }))
            console.log('Ready!')
        })
    </script>
</head>

<body class=" flex h-screen justify-center items-start " x-data="calculator">
    <div class="m-8 p-8 text-4xl bg-gray-200">
        <ul>
            <li class="italic"> Effacer-moi </li>
            <li> Merci de dessiner une grille de 4 colonnes... </li>
        </ul>
    </div>
</body>

</html>