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>