Authentication Components 구성 요소

<div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>