18Switch language to العربية
Tailwind CSSGet Started with Tailwind v4

Templates for the Web

Clean, modern templates. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Files
app/login-01/page.tsx
import { LoginForm } from "@/components/login-form"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <LoginForm />
      </div>
    </div>
  )
}
A simple login form.
login-01
login-01
Files
app/login-03/page.tsx
import { GalleryVerticalEnd } from "lucide-react"

import { LoginForm } from "./components/login-form"

export default function LoginPage() {
  return (
    <div className="bg-muted flex min-h-svh flex-col items-center justify-center ga ">
      <div className="flex w-full max-w-sm flex-col ga">
        <a href="#" className="flex items-center gap-2 self-center font-medium">
          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
            <GalleryVerticalEnd className="size-4" />
          </div>
          Acme Inc.
        </a>
        <LoginForm />
      </div>
    </div>
  )
}
Login form with muted card layout
login-03
login-03
Files
app/login-04/page.tsx
import { LoginForm } from "./components/login-form"

export default function LoginPage() {
  return (
    <div className="bg-muted flex min-h-svh flex-col items-center justify-center ">
      <div className="w-full max-w-sm md:max-w-4xl">
        <LoginForm />
      </div>
    </div>
  )
}
Split login form with image panel
login-04
login-04