响应式密码重置组件,支持暗黑模式
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900"> <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700"> <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2> <form class="space-y-4"> <div> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label> <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500"> </div> <div> <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">Send Reset Link</button> </div> </form> </div> </div>
一个复杂的响应式密码重置组件,具有等宽/开发人员设计风格,采用黑白配色方案和明亮的口音。它专为文档/wiki 站点设计,包括深色模式支持和语义 HTML。
一个采用拟物设计的密码重置组件,具有响应式效果和黑暗主题支持。
一个极简且响应迅速的密码重置组件,具有海洋/蓝色调,专为市场平台设计,包括深色模式支持。