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

登录表单组件

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

预览

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="you@example.com" 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>

相关组件

登录表单组件

一个响应式登录表单组件,采用 Material Design 原则设计,并使用 Tailwind CSS 设置样式。它具有大地色调配色方案和适合博客或内容消费平台的简单布局,并支持深色主题。

打开

登录表单组件

一个复杂的响应式登录表单组件,具有微交互和类似的配色方案,适用于商业/公司网站。它支持深色模式并使用 Tailwind CSS 进行样式设置。

打开

登录表单组件

响应式登录表单组件,具有包豪斯风格的设计、温暖的中性配色方案和深色模式支持,适用于金融和银行应用程序。

打开