组件 密码重置 密码重置组件

密码重置组件

一个极简和扁平设计的密码重置组件,采用自然色调,响应式设计,并支持暗主题,旨在为博客内容量身定制。

预览

HTML 代码

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

相关组件

密码重置组件

一个采用拟物设计的密码重置组件,具有响应式效果和黑暗主题支持。

打开

密码重置组件

一个极简主义的密码重置组件,使用Tailwind CSS具备响应式设计和深色主题支持。

打开

密码重置组件

一个采用拟物风格的密码重置组件,使用大地色调以实现自然美感,并针对仪表板应用进行结构设计。支持黑暗模式且具有响应式布局。

打开