認証コンポーネント
ビジネス/企業のWebサイトに適したグレースケールの配色を備えたスキューモーフィックスタイルで設計されたレスポンシブ認証コンポーネント。
HTMLコード
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-300 text-center">Please sign in to your account</p>
<form class="space-y-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
</div>
<button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
</form>
<p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
<div class="mt-4 text-center">
<img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
<p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
</div>
</div>
</div>