Authentication Forms
Login, signup, and password reset forms with validation and responsive designs for user authentication.
4 COMPONENT VARIATIONS
Asymmetric Split Layout
A unique asymmetric layout with a diagonal split between the form and a decorative side panel.
View
Branded Login with Card
A branded login form with a card layout, logo, and clean design.
View
Geometric Pattern Login
A modern login form with geometric pattern background and clean, minimalist inputs.
View
Modern Login with Illustration
A modern login form with a decorative illustration, clean inputs, and social login options.
View
Asymmetric Split Layout
A unique asymmetric layout with a diagonal split between the form and a decorative side panel.
Sign in
Don't have an account? Register here
Welcome to our platform
Discover a new way to manage your projects and collaborate with your team.
Component Code
<div class="min-h-screen bg-white relative overflow-hidden">
<!-- Diagonal background -->
<div class="absolute inset-0 bg-gradient-to-br from-cyan-700 to-cyan-900 transform -skew-y-6 origin-top-right z-0"></div>
<div class="min-h-screen flex relative z-10">
<div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
<div class="mx-auto w-full max-w-sm lg:w-96 bg-white p-8 rounded-lg border border-gray-100">
<div>
<h2 class="mt-2 text-3xl font-extrabold text-gray-900">
Sign in
</h2>
<p class="mt-2 text-sm text-gray-600">
Don't have an account?
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600 border-b border-cyan-700 pb-0.5">
Register here
</a>
</p>
</div>
<div class="mt-8">
<div class="mt-6">
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">
Email address
</label>
<div class="mt-1 relative rounded-md">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full pl-10 pr-3 py-3 border-b-2 border-gray-200 placeholder-gray-400 focus:outline-none focus:border-cyan-700 sm:text-sm rounded-t-md bg-gray-50">
</div>
</div>
<div class="space-y-1">
<label for="password" class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1 relative rounded-md">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
</svg>
</div>
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full pl-10 pr-3 py-3 border-b-2 border-gray-200 placeholder-gray-400 focus:outline-none focus:border-cyan-700 sm:text-sm rounded-t-md bg-gray-50">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-cyan-700 focus:ring-cyan-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600 border-b border-cyan-700 pb-0.5">
Forgot password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md text-sm font-medium text-white bg-cyan-700 hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="hidden lg:block relative w-0 flex-1">
<div class="absolute inset-0 flex items-center justify-center">
<div class="max-w-md w-full p-6">
<div class="text-white text-center">
<h2 class="text-3xl font-bold mb-6">Welcome to our platform</h2>
<p class="text-cyan-100 mb-8">Discover a new way to manage your projects and collaborate with your team.</p>
<div class="flex justify-center space-x-3">
<div class="h-3 w-3 rounded-full bg-white"></div>
<div class="h-3 w-3 rounded-full bg-white opacity-60"></div>
<div class="h-3 w-3 rounded-full bg-white opacity-30"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Branded Login with Card
A branded login form with a card layout, logo, and clean design.
Component Code
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<div class="flex justify-center">
<div class="h-12 w-12 rounded-full bg-cyan-700 flex items-center justify-center">
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
</div>
</div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
Or
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">
start your 14-day free trial
</a>
</p>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md border border-gray-200">
<div class="bg-white py-8 px-4 sm:rounded-lg sm:px-10">
<form class="space-y-6" action="#" method="POST">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">
Email address
</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-cyan-700 focus:ring-cyan-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-white bg-cyan-700 hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
Sign in
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fillRule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clipRule="evenodd" />
</svg>
<span class="ml-2">Facebook</span>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
<span class="ml-2">Twitter</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Geometric Pattern Login
A modern login form with geometric pattern background and clean, minimalist inputs.
Sign in to your account
Component Code
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
<!-- Geometric pattern background -->
<div class="absolute inset-0 overflow-hidden opacity-10">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-cyan-700 rounded-full"></div>
<div class="absolute top-1/4 right-1/4 w-64 h-64 bg-cyan-700 rounded-full"></div>
<div class="absolute bottom-0 right-0 w-80 h-80 bg-cyan-700 rounded-full transform translate-x-1/2 translate-y-1/2"></div>
</div>
<div class="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
<div class="text-center">
<h2 class="text-center text-3xl font-extrabold text-gray-900">
Sign in to your account
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
Or
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600 border-b border-cyan-700 pb-0.5">
create a new account
</a>
</p>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white py-8 px-4 sm:rounded-lg sm:px-10 border border-gray-200">
<form class="space-y-6" action="#" method="POST">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">
Email address
</label>
<div class="mt-1 relative">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-3 border-0 border-b-2 border-gray-300 placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-cyan-700 sm:text-sm">
<div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-700 group-focus-within:w-full transition-all duration-300"></div>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1 relative">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-3 border-0 border-b-2 border-gray-300 placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-cyan-700 sm:text-sm">
<div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-700 group-focus-within:w-full transition-all duration-300"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-cyan-700 focus:ring-cyan-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600 border-b border-cyan-700 pb-0.5">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md text-sm font-medium text-white bg-cyan-700 hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
Sign in
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fillRule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clipRule="evenodd" />
</svg>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Modern Login with Illustration
A modern login form with a decorative illustration, clean inputs, and social login options.
Welcome back
Don't have an account? Sign up for free
Component Code
<div class="min-h-screen bg-white flex">
<div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
<div class="mx-auto w-full max-w-sm lg:w-96">
<div>
<h2 class="mt-6 text-3xl font-extrabold text-gray-900">
Welcome back
</h2>
<p class="mt-2 text-sm text-gray-600">
Don't have an account?
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">
Sign up for free
</a>
</p>
</div>
<div class="mt-8">
<div>
<div>
<p class="text-sm font-medium text-gray-700">Sign in with</p>
<div class="mt-3 grid grid-cols-3 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fillRule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clipRule="evenodd" />
</svg>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div class="mt-6 relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">
Or continue with
</span>
</div>
</div>
</div>
<div class="mt-6">
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">
Email address
</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<div class="space-y-1">
<label for="password" class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-cyan-700 focus:ring-cyan-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-600">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-white bg-cyan-700 hover:bg-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="hidden lg:block relative w-0 flex-1">
<img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80" alt="">
</div>
</div>Ready to Use These Components?
Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.
Explore More ComponentsNeed Icons for Your Project?
Discover our collection of hand-picked SVG icons designed for modern applications. Copy as HTML or JSX and use them instantly in your projects.
Browse Icons