Use these Tailwind CSS authentication form examples to build clean and user-friendly sign-in and sign-up experiences for your applications. These layouts are designed with modern UI patterns, responsive behavior, and flexible structures to help you create seamless account access flows.
<section class="min-h-screen flex items-center justify-center px-4 py-16">
<div class="card w-full max-w-md border-subtle rounded-2xl p-10">
<div class="mb-8 text-center">
<h2 class="text-default text-3xl mb-3">Welcome Back</h2>
<p class="text-muted font-medium">Enter your details to access your account</p>
</div>
<button class="btn btn-lg btn-subtle-neutral gap-3">
<img src="https://www.svgrepo.com/show/355037/google.svg" class="size-5" alt="Google" />
Continue with Google
</button>
<div class="hr-label my-6 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">Secure Email Login</div>
<form class="space-y-5 mb-12">
<div class="form-field">
<label class="form-label">Email</label>
<input type="email" class="form-control form-control-lg" placeholder="name@company.com" />
</div>
<div class="form-field mb-10">
<label class="form-label">Password</label>
<input type="password" class="form-control form-control-lg" placeholder="••••••••" />
</div>
<div class="flex items-center justify-between -mt-9 -ms-1.5">
<div class="form-check">
<label for="checkboxDefaultLabel" class="form-check-input-wrapper"><input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel" /></label>
<label for="checkboxDefaultLabel" class="form-check-label text-xs">Remember me</label>
</div>
<a href="#" class="text-xs font-semibold no-underline">Forgot password?</a>
</div>
<button type="submit" class="btn btn-lg btn-primary w-full">Sign In</button>
</form>
<p class="m-0 text-center text-sm text-subtle font-medium">
New to the platform?
<a href="#" class="no-underline">Join for free</a>
</p>
</div>
</section>
<section class="min-h-screen flex items-center justify-center px-4 py-16">
<div class="card w-full max-w-xl bg-transparent border-0">
<div class="mb-8 flex items-baseline justify-between text-default">
<h2 class="text-3xl mb-3">Login</h2>
<p class="m-0 text-center text-sm text-muted font-medium">
Don't have an account?
<a href="#" class="no-underline">Signup</a>
</p>
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-3">
<button class="btn btn-lg btn-subtle-neutral gap-3 flex-1">
<img src="https://www.svgrepo.com/show/355037/google.svg" class="size-5" alt="Google" />
Signin with Google
</button>
<button class="btn btn-lg btn-subtle-neutral gap-3 flex-1">
<img src="https://www.svgrepo.com/show/448239/microsoft.svg" class="size-5" alt="Google" />
Signin with Microsoft
</button>
</div>
<div class="hr-label my-6 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">or use email</div>
<form class="space-y-5 mb-16">
<div class="form-floating form-field">
<input type="email" id="floatingInput" class="form-control-fill" placeholder=" " />
<label class="form-label" for="floatingInput">Email</label>
</div>
<div class="form-floating form-field">
<input type="email" id="floatingInput" class="form-control-fill" placeholder=" " />
<label class="form-label" for="floatingInput">Password</label>
</div>
<div class="flex items-center justify-between -mt-4 -ms-1.5">
<div class="form-check">
<label for="checkboxDefaultLabel" class="form-check-input-wrapper"><input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel" /></label>
<label for="checkboxDefaultLabel" class="form-check-label text-xs">Remember this device</label>
</div>
<a href="#" class="text-xs font-semibold no-underline">Forgot password?</a>
</div>
<button type="submit" class="btn btn-lg btn-primary w-full">Log In</button>
</form>
<p class="text-center text-sm font-medium m-0"><a href="#" class="no-underline">Trouble signing in?</a></p>
</div>
</section>
<div class="min-h-screen flex items-center justify-center px-4 py-16">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 w-full max-w-5xl">
<div class="md:col-span-7 card p-8 md:p-12 rounded-2xl border-subtle">
<h1 class="text-3xl text-default mb-3">Welcome Back</h1>
<p class="text-muted mb-10">Enter your details to sync your workspace.</p>
<form class="space-y-5">
<div class="form-field">
<label class="form-label">Email</label>
<input type="email" class="form-control form-control-lg form-control-info" placeholder="ray@example.io" />
</div>
<div class="form-field mb-10">
<div class="flex justify-between items-center">
<label class="form-label">Password</label>
<a href="#" class="text-xs text-info font-bold no-underline">Forgot password?</a>
</div>
<input type="password" class="form-control form-control-lg form-control-info" placeholder="••••••••" />
</div>
<button type="submit" class="btn btn-lg btn-info w-full">Sign In</button>
</form>
</div>
<div class="md:col-span-5 space-y-4">
<div class="flex-1 card p-8 rounded-2xl border-subtle space-y-3">
<p class="font-semibold uppercase tracking-widest text-subtle mb-6 text-center">Social Connect</p>
<button class="btn btn-lg btn-subtle-neutral text-sm gap-3 border-subtle w-full">
<img src="https://www.svgrepo.com/show/355037/google.svg" class="size-5" alt="Google" />
Google
</button>
<button class="btn btn-lg btn-subtle-neutral text-sm gap-3 border-subtle w-full">
<img src="https://www.svgrepo.com/show/448234/linkedin.svg" class="size-5" alt="LinkedIn" />
LinkedIn
</button>
<button class="btn btn-lg btn-subtle-neutral text-sm gap-3 border-subtle w-full">
<img src="https://www.svgrepo.com/show/448239/microsoft.svg" class="size-5" alt="Microsoft" />
Microsoft
</button>
</div>
<div class="bg-info rounded-2xl p-8 text-white relative overflow-hidden group">
<h3 class="text-xl font-bold mb-2">New here?</h3>
<p class="text-sm mb-6">Join 10k+ developers and start building today.</p>
<button class="btn text-white bg-white/20 backdrop-blur-md border-white/30 rounded-full">Create Account</button>
<div class="absolute -bottom-10 -right-10 size-32 bg-white/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
</div>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center px-4 py-16">
<div class="card w-full max-w-2xl lg:max-w-5xl flex-row border-subtle rounded-2xl overflow-hidden">
<!-- left column -->
<div class="hidden lg:flex flex-col p-16 bg-default">
<a href="/" class="mb-14"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="Logo" class="h-14 dark:brightness-0 dark:invert" /></a>
<h1 class="text-6xl text-default mb-6">
Elevate your
<br />
<span class="bg-clip-text text-transparent bg-linear-to-r from-secondary to-primary">workflow.</span>
</h1>
<p class="text-lg text-muted max-w-sm mb-10">Join the next generation of creators building high-performance interfaces with our refined design system.</p>
<div class="flex gap-12">
<div>
<h4 class="text-default tracking-tight mb-2">99.9%</h4>
<p class="text-xs uppercase tracking-widest text-muted font-medium">Uptime</p>
</div>
<div>
<h4 class="text-default tracking-tight mb-2">250ms</h4>
<p class="text-xs uppercase tracking-widest text-muted font-medium">Avg. Latency</p>
</div>
</div>
<p class="mt-auto pt-6 border-t border-subtle text-xs font-medium tracking-[0.2em] text-muted uppercase">Trusted by 500+ modern teams</p>
</div>
<!-- right column -->
<div class="p-8 md:p-14 flex-1">
<div class="mb-10 text-default text-center lg:text-left">
<h4 class="tracking-tight mb-2">Get Started</h4>
<p class="text-muted font-medium text-sm">Create your account to start building.</p>
</div>
<form class="space-y-5">
<div class="flex gap-4">
<div class="form-field flex-1">
<label class="form-label ms-1">First Name</label>
<input type="text" class="form-control-fill form-control-lg" placeholder="John" />
</div>
<div class="form-field flex-1">
<label class="form-label ms-1">Last Name</label>
<input type="text" class="form-control-fill form-control-lg" placeholder="Doe" />
</div>
</div>
<div class="form-field">
<label class="form-label ms-1">Email Address</label>
<input type="email" class="form-control-fill form-control-lg" placeholder="john@example.com" />
</div>
<div class="form-field">
<label class="form-label ms-1">Password</label>
<input type="password" class="form-control-fill form-control-lg" placeholder="••••••••" />
</div>
<div class="form-check -ms-2 -mt-4">
<label for="checkboxDefaultLabel" class="form-check-input-wrapper"><input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel" /></label>
<label for="checkboxDefaultLabel" class="form-check-label text-xs">
I agree to the
<a href="#" class="text-primary font-medium hover:underline">Terms of Service</a>
and
<a href="#" class="text-primary font-medium hover:underline">Privacy Policy</a>
.
</label>
</div>
<button type="submit" class="btn btn-lg btn-primary w-full">Create Account</button>
</form>
<div class="hr-label my-10 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">Or continue with</div>
<div class="flex gap-4 mb-10">
<button class="btn btn-subtle-neutral btn-lg gap-3 text-sm flex-1">
<img src="https://www.svgrepo.com/show/355037/google.svg" class="size-4" alt="Google" />
Google
</button>
<button class="btn btn-subtle-neutral btn-lg gap-3 text-sm flex-1">
<img src="https://www.svgrepo.com/show/341847/github.svg" class="size-4 dark:invert" alt="GitHub" />
GitHub
</button>
</div>
<p class="text-center text-xs tracking-wide">
Already a member?
<a href="#" class="text-muted no-underline font-semibold hover:text-primary">Sign in here</a>
</p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center px-4 py-16">
<div class="card lg:flex-row w-full max-w-xl lg:max-w-5xl rounded-2xl overflow-hidden border border-subtle/60">
<!-- left column -->
<div class="hidden lg:flex lg:w-9/20 bg-linear-to-tl from-primary to-info-dark dark:to-info-light p-12 flex-col overflow-hidden">
<a href="/" class="mb-20"><img src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png" alt="Logo" class="h-14 brightness-0 invert" /></a>
<h1 class="text-5xl font-bold text-white leading-tight mb-6">
Join the future
<br />
of
<span class="text-primary-lighter/80 dark:text-primary-darker/80">data intelligence.</span>
</h1>
<p class="text-primary-lighter dark:text-primary-darker text-lg max-w-sm">Empower your team with real-time insights and seamless collaboration.</p>
<div class="mt-auto bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20">
<p class="text-white text-lg italic mb-5">"Setting up our team took minutes. The insights we've gained since are invaluable."</p>
<div class="flex items-center gap-3">
<div class="avatar"><div class="avatar-name rounded-full font-bold text-primary dark:text-primary-light bg-primary-lighter dark:bg-primary-darker">SJ</div></div>
<div>
<p class="text-sm font-bold text-white leading-none mb-1.5">Sarah Jenkins</p>
<p class="text-xs text-white/80 mb-0">Head of Ops at CloudScale</p>
</div>
</div>
</div>
</div>
<!-- right column -->
<div class="flex flex-col items-center lg:items-start w-full lg:w-11/20 p-6 sm:p-10 mx-auto min-h-204">
<ul class="nav nav-underline mb-8" id="myTab" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Signin</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Signup</button></li>
</ul>
<div class="tab-content w-full" id="myTabContent">
<!-- signin tab -->
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="text-default text-center lg:text-left mb-8">
<h2 class="text-3xl mb-2">Welcome back</h2>
<p class="text-muted">Sign in to continue to your account.</p>
</div>
<form class="space-y-5 w-full">
<div class="form-field">
<label class="form-label text-sm mb-1">Email Address</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 form-control-icon-start" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<input type="email" class="form-control form-control-lg" placeholder="name@company.com" />
</div>
</div>
<div class="form-field">
<label class="form-label text-sm mb-1">Password</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 form-control-icon-start" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
<input type="password" class="form-control form-control-lg" placeholder="••••••••" />
</div>
</div>
<div class="flex items-center justify-between -mt-3 px-1.5">
<div class="form-check -ms-3">
<label for="checkboxDefaultLabel" class="form-check-input-wrapper"><input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel" /></label>
<label for="checkboxDefaultLabel" class="form-check-label text-xs">Keep me signed in</label>
</div>
<a href="#" class="text-xs text-muted hover:text-primary no-underline">Forgot password?</a>
</div>
<button type="submit" class="btn btn-primary btn-lg w-full">Sign In</button>
</form>
<div class="hr-label my-8 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">Or continue with</div>
<div class="flex justify-center gap-4 mb-10">
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/355037/google.svg" class="size-5" alt="Google" /></button>
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/448234/linkedin.svg" class="size-5" alt="LinkedIn" /></button>
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/341847/github.svg" class="size-5 dark:invert" alt="GitHub" /></button>
</div>
<p class="text-center text-xs text-muted mb-0">
Don’t have an account?
<a href="#" class="text-muted no-underline font-semibold hover:text-primary">Create one</a>
</p>
</div>
<!-- signup tab -->
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="text-default text-center lg:text-left mb-8">
<h2 class="text-3xl mb-2">Create your account</h2>
<p class="text-muted">
Start your
<span class="font-medium text-primary">14-day free trial</span>
today.
</p>
</div>
<form class="space-y-5 w-full">
<div class="grid grid-cols-1 gap-5">
<div class="form-field">
<label class="form-label text-sm mb-1">Full Name</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 form-control-icon-start" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
<input type="text" class="form-control form-control-lg" placeholder="John Doe" />
</div>
</div>
<div class="form-field">
<label class="form-label text-sm mb-1">Email Address</label>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 form-control-icon-start" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<input type="email" class="form-control form-control-lg" placeholder="name@company.com" />
</div>
</div>
<div class="form-field">
<div class="flex justify-between items-center">
<label class="form-label text-sm mb-1">Password</label>
<span class="text-xs text-subtle">Min. 8 Chars</span>
</div>
<div class="input-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 form-control-icon-start" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
<input type="password" class="form-control form-control-lg" placeholder="••••••••" />
</div>
</div>
</div>
<div class="form-check -ms-2 -mt-4">
<label for="checkboxDefaultLabel2" class="form-check-input-wrapper"><input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel2" /></label>
<label for="checkboxDefaultLabel2" class="form-check-label text-xs">
I agree to the
<a href="#" class="text-primary font-medium hover:underline">Terms of Service</a>
and
<a href="#" class="text-primary font-medium hover:underline">Privacy Policy</a>
.
</label>
</div>
<button type="submit" class="btn btn-primary btn-lg w-full">Create Account</button>
</form>
<div class="hr-label my-8 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">Or join with</div>
<div class="flex justify-center gap-4 mb-10">
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/355037/google.svg" class="size-5" alt="Google" /></button>
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/448234/linkedin.svg" class="size-5" alt="LinkedIn" /></button>
<button type="button" class="btn btn-outline-neutral btn-lg"><img src="https://www.svgrepo.com/show/341847/github.svg" class="size-5 dark:invert" alt="GitHub" /></button>
</div>
<p class="text-center text-xs text-muted mb-0">
Already have an account?
<a href="#" class="text-muted no-underline font-semibold hover:text-primary">Sign in here</a>
</p>
</div>
</div>
</div>
</div>
</div>