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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
    <!-- Registration Form -->
    <div class="container mx-auto my-8">
        <h1 class="text-2xl font-bold mb-4">User Registration</h1>
        <form action="/register" method="post" class="max-w-md mx-auto">
            <div class="mb-4">
                <label for="username" class="block mb-2 font-bold">Username</label>
                <input type="text" id="username" name="username" class="w-full px-3 py-2 border border-gray-300 rounded">
            </div>
            <div class="mb-4">
                <label for="password" class="block mb-2 font-bold">Password</label>
                <input type="password" id="password" name="password" class="w-full px-3 py-2 border border-gray-300 rounded">
            </div>
            <div class="mb-4">
                <label for="confirmPassword" class="block mb-2 font-bold">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded">
            </div>
            <div class="flex items-center">
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Register
                </button>
                <a href="/login" class="ml-4 text-blue-500 hover:underline">Already have an account? Log in</a>
            </div>
        </form>
    </div>
</body>

</html>
