AuthComponent
A skeuomorphic authentication component designed with Tailwind CSS featuring responsive effects and dark theme support.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="password" type="password" placeholder="********">
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400">
<label class="ml-2 block text-gray-700 dark:text-gray-300">Remember Me</label>
</div>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
</div>
<div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
</div>
<div class="mt-6 text-center border-t pt-4">
<p class="text-gray-600 dark:text-gray-400 text-sm">or login with</p>
<div class="flex justify-center mt-2">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/200" alt="Random user avatar">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/201" alt="Random user avatar">
<img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/202" alt="Random user avatar">
</div>
</div>
</div>
</div>Related Components
MinimalistAuthForm
A responsive, minimalist login form component designed for portfolios or web applications. It features a flat design aesthetic with a complementary color scheme: blue is used for interactive elements in light mode, and orange is used in dark mode. The form includes fields for email and password, a 'remember me' option, a 'forgot password' link, an option to sign up, and social login integration (e.g., GitHub). It supports dark theme and is built purely with HTML and Tailwind CSS for easy integration.
Authentication Components Component
Authentication Component for E-commerce with 3D design, triadic color scheme, complex interactions, responsive and dark mode support.
Skeuomorphism Authentication Component
Skeuomorphism Authentication Component with Analogous color scheme and complex layout for Blog/Content purposes, responsive and dark theme support.