Authentication Components Component
A responsive authentication component designed for dark mode UI, featuring a login and signup form with Tailwind CSS styling.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
</div>
<div class="mt-6 border-t border-gray-600"></div>
<h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
<input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
<input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
</form>
<div class="mt-4 text-center">
<small>Or sign up using</small>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
</div>
</div>
</div>
</div>Related Components
Authentication Components Component
Authentication Component with dark mode, responsive effects, and no JavaScript dependency.
Authentication Components Component
A simple authentication component designed with Neumorphism style and a monochromatic color scheme, suitable for social media interfaces. It includes a login form with email and password fields, a login button, and a signup link. The component is responsive and supports dark mode.
Retro_Healthcare_Auth_Component
A responsive authentication component with a retro/vintage design, muted color scheme, tailored for healthcare/medical applications, including dark mode support.