Authentication Components Component

<div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
    <div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
        <h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
            </div>
            <button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
        </form>
        <p class="mt-4 text-sm text-center">
            <a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-6">
            <span class="w-1/4 border-b border-gray-600"></span>
            <span class="mx-2 text-gray-400">or</span>
            <span class="w-1/4 border-b border-gray-600"></span>
        </div>
        <button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
            Sign in with Google
        </button>
    </div>
</div>