elreco
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center"> <div class="bg-white shadow-lg rounded-lg p-8 max-w-sm w-full"> <h1 class="text-2xl font-bold mb-6 text-center">Calculator</h1> <div class="grid grid-cols-4 gap-4"> <input type="text" class="col-span-4 p-2 border rounded text-right" value="0" readonly> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">7</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">8</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">9</button> <button class="bg-yellow-400 p-4 rounded hover:bg-yellow-300">/</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">4</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">5</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">6</button> <button class="bg-yellow-400 p-4 rounded hover:bg-yellow-300">*</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">1</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">2</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">3</button> <button class="bg-yellow-400 p-4 rounded hover:bg-yellow-300">-</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300 col-span-2">0</button> <button class="bg-gray-200 p-4 rounded hover:bg-gray-300">.</button> <button class="bg-yellow-400 p-4 rounded hover:bg-yellow-300">+</button> <button class="bg-blue-500 text-white p-4 rounded hover:bg-blue-400 col-span-4">=</button> </div> </div> </body>