搜索组件

类别

组件认证组件

认证组件

与用户身份验证和安全相关的组件

身份验证组件

一个简单的身份验证组件，采用 Neumorphism 风格和单色配色方案设计，适用于社交媒体界面。它包括一个带有电子邮件和密码字段的登录表单、一个登录按钮和一个注册链接。该组件响应迅速，并支持深色模式。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-8 w-80 neumorphism">
        <h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="flex justify-center mt-4">
            <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
    </div>
</div>

<style>
.neumorphism {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), 
                -8px -8px 16px rgba(255, 255, 255, 0.7);
    border-radius: 20px;
}
</style>

认证组件

一个复杂的响应式身份验证组件，采用粗野主义设计风格，具有深色主题，适用于社交媒体应用程序。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg shadow-xl w-full max-w-lg">
        <h1 class="text-3xl font-bold text-white mb-4">Join Our Community</h1>
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-white">Email</label>
            <input type="email" id="email" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-white">Password</label>
            <input type="password" id="password" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="********" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <input type="checkbox" id="remember" class="h-4 w-4 text-yellow-500 border-gray-300 rounded focus:ring focus:ring-yellow-400">
                <label for="remember" class="ml-2 block text-sm text-white">Remember me</label>
            </div>
            <a href="#" class="text-sm text-yellow-400 hover:underline">Forgot Password?</a>
        </div>
        <button class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-300">Sign In</button>
        <div class="my-4 text-center"><span class="text-white">or</span></div>
        <button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2"> Sign in with Google
        </button>
        <p class="mt-4 text-sm text-white text-center">
            Don't have an account? 
            <a href="#" class="text-yellow-400 hover:underline">Sign Up</a>
        </p>
    </div>
</div>

身份验证组件

用于仪表板的响应式暗模式身份验证组件，利用大地色调营造自然美感。

打开预览

                <div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
    <div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
        <h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
            </div>
            <button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
        </form>
        <p class="mt-4 text-sm text-center">
            <a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-6">
            <span class="w-1/4 border-b border-gray-600"></span>
            <span class="mx-2 text-gray-400">or</span>
            <span class="w-1/4 border-b border-gray-600"></span>
        </div>
        <button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
            Sign in with Google
        </button>
    </div>
</div>

复古身份验证组件

一个复杂的响应式认证组件，具有复古风格的设计，适合数据可视化和控制仪表板。它采用三原色和交互元素。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
    <div class="bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center mb-6">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Email</label>
                <input type="email" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Password</label>
                <input type="password" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" id="remember-me">
                    <label for="remember-me" class="ml-2 text-sm">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
            </div>
            <button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md transition-colors">Login</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></p>
        </div>
        <div class="mt-6 flex items-center justify-between border-t border-gray-600 pt-4">
            <div class="flex items-center">
                <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full border border-gray-600">
                <span class="ml-2 text-sm">John Doe</span>
            </div>
            <a href="#" class="text-sm text-blue-400 hover:underline">Settings</a>
        </div>
    </div>
</div>

认证组件

新拟态风格的电子商务身份验证组件，采用三分色彩方案和简单布局。支持暗黑模式且响应迅速。使用 Tailwind CSS，不用 JavaScript。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-8 bg-white dark:bg-gray-700 rounded-xl shadow-lg dark:shadow-none">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-start">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500">
          </div>
          <div class="ml-2 text-sm">
            <label for="remember_me" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
        </div>
      </div>
      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

身份验证组件

一个响应式和互动的登录与注册组件，采用微交互设计，使用互补色彩为博客内容界面提供暗主题支持。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

认证组件

具有 3D 设计、单色配色方案、简单复杂性和产品组合用途的认证组件组件。支持深色主题的响应式设计。

打开预览

                
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <div class="h-48 w-full md:w-48 bg-gradient-to-br from-gray-400 to-gray-600 dark:from-gray-700 dark:to-gray-900 flex items-center justify-center">
          <svg class="h-24 w-24 text-gray-200 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Authentication</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Simple Authentication Form</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A simple authentication form with a minimalist 3D-like design.</p>
        <div class="mt-4">
          <input type="text" placeholder="Username" class="mt-1 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
          <input type="password" placeholder="Password" class="mt-4 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
        </div>
        <div class="mt-6">
          <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600">Sign In</button>
        </div>
      </div>
    </div>
  </div>
</div>

认证组件

一个响应式认证组件，采用拟物化风格，具有适合企业网站的灰度配色方案。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center">Please sign in to your account</p>
        <form class="space-y-4">
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
            </div>
            <button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
        </form>
        <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
            <p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
        </div>
    </div>
</div>

身份验证组件

一个采用新拟态设计的电子商务认证组件，具有明亮的色彩、支持暗主题和响应式设计。

打开预览

                <div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

认证组件

带有暗模式、响应效果且无JavaScript依赖的身份验证组件。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-10 rounded-lg shadow-xl w-full max-w-md">
    <h1 class="text-white text-center text-2xl font-bold mb-6">Login</h1>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-nonse border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign In</button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-700" href="#">Forgot Password?</a>
      </div>
    </form>
  </div>
</div>