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.
"use client";
import {
Button,
Card,
Checkbox,
Divider,
Field,
Input,
Text,
} from "@hummingbirdui/react";
export default function SignIn1() {
return (
<section className="min-h-screen flex items-center justify-center px-4 py-16">
<Card className="w-full max-w-md border-subtle rounded-2xl p-10">
<div className="mb-8 text-center">
<Text as="h2" size="3xl" className="text-default mb-3">
Welcome Back
</Text>
<Text fontWeight="medium" className="text-muted">
Enter your details to access your account
</Text>
</div>
<Button variant="subtle" color="neutral" size="lg" className="gap-3">
<img
src="https://www.svgrepo.com/show/355037/google.svg"
className="size-5"
alt="Google"
/>
Continue with Google
</Button>
<Divider className="my-6 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">
Secure Email Login
</Divider>
<form className="space-y-5 mb-12">
<Field>
<Field.Label htmlFor="signin-1-email">Email</Field.Label>
<Input
id="signin-1-email"
type="email"
size="lg"
placeholder="name@company.com"
/>
</Field>
<Field className="mb-10">
<Field.Label htmlFor="signin-1-password">Password</Field.Label>
<Input
id="signin-1-password"
type="password"
size="lg"
placeholder="••••••••"
/>
</Field>
<div className="flex items-center justify-between -mt-9 -ms-1.5">
<div className="form-check">
<Checkbox id="signin-1-remember" />
<label
htmlFor="signin-1-remember"
className="form-check-label text-xs"
>
Remember me
</label>
</div>
<a href="#" className="text-xs font-semibold no-underline">
Forgot password?
</a>
</div>
<Button type="submit" size="lg" className="w-full">
Sign In
</Button>
</form>
<Text
size="sm"
fontWeight="medium"
className="m-0 text-center text-subtle"
>
New to the platform?{" "}
<a href="#" className="no-underline">
Join for free
</a>
</Text>
</Card>
</section>
);
}"use client";
import {
Button,
Card,
Checkbox,
Divider,
FloatingLabel,
Input,
Text,
} from "@hummingbirdui/react";
export default function SignIn2() {
return (
<section className="min-h-screen flex items-center justify-center px-4 py-16">
<Card className="w-full max-w-xl bg-transparent border-0">
<div className="mb-8 flex items-baseline justify-between text-default">
<Text as="h2" size="3xl" className="mb-3">
Login
</Text>
<Text
size="sm"
fontWeight="medium"
className="m-0 text-center text-muted"
>
Don't have an account?{" "}
<a href="#" className="no-underline">
Signup
</a>
</Text>
</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<Button
variant="subtle"
color="neutral"
size="lg"
className="gap-3 flex-1"
>
<img
src="https://www.svgrepo.com/show/355037/google.svg"
className="size-5"
alt="Google"
/>
Signin with Google
</Button>
<Button
variant="subtle"
color="neutral"
size="lg"
className="gap-3 flex-1"
>
<img
src="https://www.svgrepo.com/show/448239/microsoft.svg"
className="size-5"
alt="Microsoft"
/>
Signin with Microsoft
</Button>
</div>
<Divider className="my-6 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">
or use email
</Divider>
<form className="space-y-5 mb-16">
<FloatingLabel
htmlFor="signin-2-email"
label="Email"
className="form-field"
>
<Input id="signin-2-email" type="email" variant="fill" />
</FloatingLabel>
<FloatingLabel
htmlFor="signin-2-password"
label="Password"
className="form-field"
>
<Input id="signin-2-password" type="password" variant="fill" />
</FloatingLabel>
<div className="flex items-center justify-between -mt-4 -ms-1.5">
<div className="form-check">
<Checkbox id="signin-2-remember" />
<label
htmlFor="signin-2-remember"
className="form-check-label text-xs"
>
Remember this device
</label>
</div>
<a href="#" className="text-xs font-semibold no-underline">
Forgot password?
</a>
</div>
<Button type="submit" size="lg" className="w-full">
Log In
</Button>
</form>
<Text size="sm" fontWeight="medium" className="text-center m-0">
<a href="#" className="no-underline">
Trouble signing in?
</a>
</Text>
</Card>
</section>
);
}"use client";
import { Button, Card, Field, Input, Text } from "@hummingbirdui/react";
const socials = [
{ name: "Google", src: "https://www.svgrepo.com/show/355037/google.svg" },
{ name: "LinkedIn", src: "https://www.svgrepo.com/show/448234/linkedin.svg" },
{
name: "Microsoft",
src: "https://www.svgrepo.com/show/448239/microsoft.svg",
},
];
export default function SignIn3() {
return (
<div className="min-h-screen flex items-center justify-center px-4 py-16">
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 w-full max-w-5xl">
<Card className="md:col-span-7 p-8 md:p-12 rounded-2xl border-subtle">
<Text as="h1" size="3xl" className="text-default mb-3">
Welcome Back
</Text>
<Text className="text-muted mb-10">
Enter your details to sync your workspace.
</Text>
<form className="space-y-5">
<Field>
<Field.Label htmlFor="signin-3-email">Email</Field.Label>
<Input
id="signin-3-email"
type="email"
size="lg"
color="info"
placeholder="ray@example.io"
/>
</Field>
<Field className="mb-10">
<div className="flex justify-between items-center">
<Field.Label htmlFor="signin-3-password">Password</Field.Label>
<a
href="#"
className="text-xs text-info font-bold no-underline"
>
Forgot password?
</a>
</div>
<Input
id="signin-3-password"
type="password"
size="lg"
color="info"
placeholder="••••••••"
/>
</Field>
<Button type="submit" color="info" size="lg" className="w-full">
Sign In
</Button>
</form>
</Card>
<div className="md:col-span-5 space-y-4">
<Card className="flex-1 p-8 rounded-2xl border-subtle space-y-3">
<Text
fontWeight="semibold"
className="uppercase tracking-widest text-subtle mb-6 text-center"
>
Social Connect
</Text>
{socials.map((social) => (
<Button
key={social.name}
variant="subtle"
color="neutral"
size="lg"
className="text-sm gap-3 border-subtle w-full"
>
<img src={social.src} className="size-5" alt={social.name} />
{social.name}
</Button>
))}
</Card>
<div className="bg-info rounded-2xl p-8 text-white relative overflow-hidden group">
<Text as="h3" size="xl" fontWeight="bold" className="mb-2">
New here?
</Text>
<Text size="sm" className="mb-6">
Join 10k+ developers and start building today.
</Text>
<Button
color={null}
className="text-white bg-white/20 backdrop-blur-md border-white/30 rounded-full"
>
Create Account
</Button>
<div className="absolute -bottom-10 -right-10 size-32 bg-white/10 rounded-full group-hover:scale-150 transition-transform duration-700" />
</div>
</div>
</div>
</div>
);
}"use client";
import {
Button,
Card,
Checkbox,
Divider,
Field,
Input,
Text,
} from "@hummingbirdui/react";
const stats = [
{ value: "99.9%", label: "Uptime" },
{ value: "250ms", label: "Avg. Latency" },
];
export default function SignUp1() {
return (
<div className="min-h-screen flex items-center justify-center px-4 py-16">
<Card className="w-full max-w-2xl lg:max-w-5xl flex-row border-subtle rounded-2xl overflow-hidden">
{/* left column */}
<div className="hidden lg:flex flex-col p-16 bg-default">
<a href="#" className="mb-14">
<img
src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png"
alt="Logo"
className="h-14 dark:brightness-0 dark:invert"
/>
</a>
<Text as="h1" size="6xl" className="text-default mb-6">
Elevate your
<br />
<span className="bg-clip-text text-transparent bg-linear-to-r from-secondary to-primary">
workflow.
</span>
</Text>
<Text size="lg" className="text-muted max-w-sm mb-10">
Join the next generation of creators building high-performance
interfaces with our refined design system.
</Text>
<div className="flex gap-12">
{stats.map((stat) => (
<div key={stat.label}>
<Text as="h4" className="text-default tracking-tight mb-2">
{stat.value}
</Text>
<Text
size="xs"
fontWeight="medium"
className="uppercase tracking-widest text-muted"
>
{stat.label}
</Text>
</div>
))}
</div>
<Text
size="xs"
fontWeight="medium"
className="mt-auto pt-6 border-t border-subtle tracking-[0.2em] text-muted uppercase"
>
Trusted by 500+ modern teams
</Text>
</div>
{/* right column */}
<div className="p-8 md:p-14 flex-1">
<div className="mb-10 text-default text-center lg:text-left">
<Text as="h4" className="tracking-tight mb-2">
Get Started
</Text>
<Text size="sm" fontWeight="medium" className="text-muted">
Create your account to start building.
</Text>
</div>
<form className="space-y-5">
<div className="flex gap-4">
<Field className="flex-1">
<Field.Label htmlFor="signup-1-first-name" className="ms-1">
First Name
</Field.Label>
<Input
id="signup-1-first-name"
type="text"
variant="fill"
size="lg"
placeholder="John"
/>
</Field>
<Field className="flex-1">
<Field.Label htmlFor="signup-1-last-name" className="ms-1">
Last Name
</Field.Label>
<Input
id="signup-1-last-name"
type="text"
variant="fill"
size="lg"
placeholder="Doe"
/>
</Field>
</div>
<Field>
<Field.Label htmlFor="signup-1-email" className="ms-1">
Email Address
</Field.Label>
<Input
id="signup-1-email"
type="email"
variant="fill"
size="lg"
placeholder="john@example.com"
/>
</Field>
<Field>
<Field.Label htmlFor="signup-1-password" className="ms-1">
Password
</Field.Label>
<Input
id="signup-1-password"
type="password"
variant="fill"
size="lg"
placeholder="••••••••"
/>
</Field>
<div className="form-check -ms-2 -mt-4">
<Checkbox id="signup-1-terms" />
<label
htmlFor="signup-1-terms"
className="form-check-label text-xs"
>
I agree to the{" "}
<a
href="#"
className="text-primary font-medium hover:underline"
>
Terms of Service
</a>{" "}
and{" "}
<a
href="#"
className="text-primary font-medium hover:underline"
>
Privacy Policy
</a>{" "}
.
</label>
</div>
<Button type="submit" size="lg" className="w-full">
Create Account
</Button>
</form>
<Divider className="my-10 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">
Or continue with
</Divider>
<div className="flex gap-4 mb-10">
<Button
variant="subtle"
color="neutral"
size="lg"
className="gap-3 text-sm flex-1"
>
<img
src="https://www.svgrepo.com/show/355037/google.svg"
className="size-4"
alt="Google"
/>
Google
</Button>
<Button
variant="subtle"
color="neutral"
size="lg"
className="gap-3 text-sm flex-1"
>
<img
src="https://www.svgrepo.com/show/341847/github.svg"
className="size-4 dark:invert"
alt="GitHub"
/>
GitHub
</Button>
</div>
<Text size="xs" className="text-center tracking-wide">
Already a member?{" "}
<a
href="#"
className="text-muted no-underline font-semibold hover:text-primary"
>
Sign in here
</a>
</Text>
</div>
</Card>
</div>
);
}"use client";
import { LockKeyhole, Mail, User } from "lucide-react";
import {
Avatar,
Button,
Card,
Checkbox,
Divider,
Field,
Input,
InputIcon,
Tabs,
Text,
} from "@hummingbirdui/react";
const socials = [
{
name: "Google",
src: "https://www.svgrepo.com/show/355037/google.svg",
className: "size-5",
},
{
name: "LinkedIn",
src: "https://www.svgrepo.com/show/448234/linkedin.svg",
className: "size-5",
},
{
name: "GitHub",
src: "https://www.svgrepo.com/show/341847/github.svg",
className: "size-5 dark:invert",
},
];
export default function SignUp2() {
return (
<div className="min-h-screen flex items-center justify-center px-4 py-16">
<Card className="lg:flex-row w-full max-w-xl lg:max-w-5xl rounded-2xl overflow-hidden border border-subtle/60">
{/* left column */}
<div className="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="#" className="mb-20">
<img
src="https://themewagon.com/wp-content/themes/themewagon/dist/images/hb.png"
alt="Logo"
className="h-14 brightness-0 invert"
/>
</a>
<Text
as="h1"
size="5xl"
fontWeight="bold"
className="text-white leading-tight mb-6"
>
Join the future <br /> of{" "}
<span className="text-primary-lighter/80 dark:text-primary-darker/80">
data intelligence.
</span>
</Text>
<Text
size="lg"
className="text-primary-lighter dark:text-primary-darker max-w-sm"
>
Empower your team with real-time insights and seamless
collaboration.
</Text>
<div className="mt-auto bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20">
<Text size="lg" className="text-white italic mb-5">
"Setting up our team took minutes. The insights we've
gained since are invaluable."
</Text>
<div className="flex items-center gap-3">
<Avatar>
<Avatar.Fallback className="font-bold text-primary dark:text-primary-light bg-primary-lighter dark:bg-primary-darker">
SJ
</Avatar.Fallback>
</Avatar>
<div>
<Text
size="sm"
fontWeight="bold"
className="text-white leading-none mb-1.5"
>
Sarah Jenkins
</Text>
<Text size="xs" className="text-white/80 mb-0">
Head of Ops at CloudScale
</Text>
</div>
</div>
</div>
</div>
{/* right column */}
<Tabs
defaultValue="signin"
className="flex flex-col items-center lg:items-start w-full lg:w-11/20 p-6 sm:p-10 mx-auto min-h-204"
>
<Tabs.List variant="underline" className="mb-8">
<Tabs.Trigger value="signin">Signin</Tabs.Trigger>
<Tabs.Trigger value="signup">Signup</Tabs.Trigger>
</Tabs.List>
<div className="w-full">
{/* signin tab */}
<Tabs.Content value="signin">
<div className="text-default text-center lg:text-left mb-8">
<Text as="h2" size="3xl" className="mb-2">
Welcome back
</Text>
<Text className="text-muted">
Sign in to continue to your account.
</Text>
</div>
<form className="space-y-5 w-full">
<Field>
<Field.Label
htmlFor="signup-2-signin-email"
className="text-sm mb-1"
>
Email Address
</Field.Label>
<InputIcon>
<InputIcon.Start>
<Mail className="size-5" />
</InputIcon.Start>
<Input
id="signup-2-signin-email"
type="email"
size="lg"
placeholder="name@company.com"
/>
</InputIcon>
</Field>
<Field>
<Field.Label
htmlFor="signup-2-signin-password"
className="text-sm mb-1"
>
Password
</Field.Label>
<InputIcon>
<InputIcon.Start>
<LockKeyhole className="size-5" />
</InputIcon.Start>
<Input
id="signup-2-signin-password"
type="password"
size="lg"
placeholder="••••••••"
/>
</InputIcon>
</Field>
<div className="flex items-center justify-between -mt-3 px-1.5">
<div className="form-check -ms-3">
<Checkbox id="signup-2-remember" />
<label
htmlFor="signup-2-remember"
className="form-check-label text-xs"
>
Keep me signed in
</label>
</div>
<a
href="#"
className="text-xs text-muted hover:text-primary no-underline"
>
Forgot password?
</a>
</div>
<Button type="submit" size="lg" className="w-full">
Sign In
</Button>
</form>
<Divider className="my-8 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">
Or continue with
</Divider>
<div className="flex justify-center gap-4 mb-10">
{socials.map((social) => (
<Button
key={social.name}
type="button"
variant="outline"
color="neutral"
size="lg"
>
<img
src={social.src}
className={social.className}
alt={social.name}
/>
</Button>
))}
</div>
<Text size="xs" className="text-center text-muted mb-0">
Don’t have an account?{" "}
<a
href="#"
className="text-muted no-underline font-semibold hover:text-primary"
>
Create one
</a>
</Text>
</Tabs.Content>
{/* signup tab */}
<Tabs.Content value="signup">
<div className="text-default text-center lg:text-left mb-8">
<Text as="h2" size="3xl" className="mb-2">
Create your account
</Text>
<Text className="text-muted">
Start your{" "}
<span className="font-medium text-primary">
14-day free trial
</span>{" "}
today.
</Text>
</div>
<form className="space-y-5 w-full">
<div className="grid grid-cols-1 gap-5">
<Field>
<Field.Label
htmlFor="signup-2-signup-name"
className="text-sm mb-1"
>
Full Name
</Field.Label>
<InputIcon>
<InputIcon.Start>
<User className="size-5" />
</InputIcon.Start>
<Input
id="signup-2-signup-name"
type="text"
size="lg"
placeholder="John Doe"
/>
</InputIcon>
</Field>
<Field>
<Field.Label
htmlFor="signup-2-signup-email"
className="text-sm mb-1"
>
Email Address
</Field.Label>
<InputIcon>
<InputIcon.Start>
<Mail className="size-5" />
</InputIcon.Start>
<Input
id="signup-2-signup-email"
type="email"
size="lg"
placeholder="name@company.com"
/>
</InputIcon>
</Field>
<Field>
<div className="flex justify-between items-center">
<Field.Label
htmlFor="signup-2-signup-password"
className="text-sm mb-1"
>
Password
</Field.Label>
<span className="text-xs text-subtle">Min. 8 Chars</span>
</div>
<InputIcon>
<InputIcon.Start>
<LockKeyhole className="size-5" />
</InputIcon.Start>
<Input
id="signup-2-signup-password"
type="password"
size="lg"
placeholder="••••••••"
/>
</InputIcon>
</Field>
</div>
<div className="form-check -ms-2 -mt-4">
<Checkbox id="signup-2-terms" />
<label
htmlFor="signup-2-terms"
className="form-check-label text-xs"
>
I agree to the{" "}
<a
href="#"
className="text-primary font-medium hover:underline"
>
Terms of Service
</a>{" "}
and{" "}
<a
href="#"
className="text-primary font-medium hover:underline"
>
Privacy Policy
</a>{" "}
.
</label>
</div>
<Button type="submit" size="lg" className="w-full">
Create Account
</Button>
</form>
<Divider className="my-8 text-xs text-subtle font-semibold uppercase tracking-[0.2em]">
Or join with
</Divider>
<div className="flex justify-center gap-4 mb-10">
{socials.map((social) => (
<Button
key={social.name}
type="button"
variant="outline"
color="neutral"
size="lg"
>
<img
src={social.src}
className={social.className}
alt={social.name}
/>
</Button>
))}
</div>
<Text size="xs" className="text-center text-muted mb-0">
Already have an account?{" "}
<a
href="#"
className="text-muted no-underline font-semibold hover:text-primary"
>
Sign in here
</a>
</Text>
</Tabs.Content>
</div>
</Tabs>
</Card>
</div>
);
}