专为深色模式 UI 设计的响应式身份验证组件,具有具有 Tailwind CSS 样式的登录和注册表单。
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white"> <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96"> <h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2> <form> <div class="mb-4"> <label class="block text-sm font-semibold mb-2" for="email">Email</label> <input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="you@example.com" required /> </div> <div class="mb-4"> <label class="block text-sm font-semibold mb-2" for="password">Password</label> <input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required /> </div> <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button> </form> <div class="mt-4 text-center"> <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a> </div> <div class="mt-6 border-t border-gray-600"></div> <h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2> <form> <div class="mb-4"> <label class="block text-sm font-semibold mb-2" for="new-email">Email</label> <input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="you@example.com" required /> </div> <div class="mb-4"> <label class="block text-sm font-semibold mb-2" for="new-password">Password</label> <input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required /> </div> <div class="mb-4"> <label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label> <input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" /> </div> <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button> </form> <div class="mt-4 text-center"> <small>Or sign up using</small> <div class="flex justify-center mt-2"> <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" /> <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" /> <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" /> </div> </div> </div> </div>
专为工业/制造应用而设计的复杂身份验证组件,具有海洋/蓝色色调的等宽/开发人员美感。包括登录、注册和密码重置表单,完全响应,支持深色模式。
具有 3D 设计、单色配色方案、简单复杂性和产品组合用途的认证组件组件。支持深色主题的响应式设计。
一个简单的响应式身份验证组件,具有 3D 设计美学和高对比度配色方案,适用于农业/农业网站。具有暗模式支持。