组件 登录表格 登录表单组件

登录表单组件

一个简单且响应迅速的登录表单,采用拟物化风格设计,使用充满活力的配色方案模仿现实世界的元素。它适用于社交媒体界面并支持深色模式。

预览

HTML 代码

<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900">  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>    <div class="mt-6">      <div class="mb-4">        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>        <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/>      </div>      <div class="mb-6">        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>        <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/>      </div>      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button>    </div>    <div class="mt-4 text-center">      <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/>    </div>    <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">      Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a>    </div>  </div> </div>

相关组件

登录表单组件

拟物化登录表单组件,设计具有鲜艳的色彩和适度的复杂度,适用于投资组合。

打开

登录表单组件 - 深色模式充满活力

一个复杂的响应式登录表单组件,专为企业/企业使用而设计,具有鲜艳的配色方案和完整的深色模式支持,旨在减轻眼睛疲劳。

打开

3D 登录表单组件

专为企业/公司网站设计的响应式 3D 登录表单组件,包含大地色调和深色模式支持。

打开