Create a site w... - Tailwind AI

Bácsi Barna
<body class="bg-gray-900 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="bg-gray-800 shadow-2xl rounded-lg p-8 max-w-md w-full">
    <h1 class="text-3xl font-bold mb-6 text-center text-white">Connect to Server</h1>
    <form>
        <div class="mb-4">
            <label for="hostname" class="block text-gray-300 mb-2">Hostname</label>
            <input type="text" id="hostname" class="w-full p-2 border border-gray-600 rounded bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter hostname">
        </div>
        <div class="mb-4">
            <label for="port" class="block text-gray-300 mb-2">Port</label>
            <input type="number" id="port" class="w-full p-2 border border-gray-600 rounded bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter port">
        </div>
        <div class="mb-4">
            <label for="username" class="block text-gray-300 mb-2">Username</label>
            <input type="text" id="username" class="w-full p-2 border border-gray-600 rounded bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter username">
        </div>
        <div class="mb-6">
            <label for="password" class="block text-gray-300 mb-2">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-600 rounded bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter password">
        </div>
        <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-500 transition-all duration-300 ease-in-out shadow-lg transform hover:scale-105">Connect</button>
    </form>
  </div>
</body>
Make it darker and asthetic
