FreeAuthentication

Login and Signup Sections

Use this component for login pages, signup flows, waitlists, beta access screens, and account creation sections.

ReactTailwind CSSAuthForm

CodersArts

Sign up for an account

Full nameEmail addressPassword

AMTRNSIK

People build with us

Join founders turning ideas into launch-ready products.

Overview

A split authentication section with form fields, action buttons, and social proof.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<LoginSignupSections />

tsx

export function LoginSignupSections() {
  return (
    <section className="overflow-hidden rounded-xl border border-white/10 bg-black text-white">
      <div className="grid min-h-[420px] md:grid-cols-2">
        <div className="p-8">
          <p className="mb-6 text-xs font-semibold">CodersArts</p>
          <h3 className="text-2xl font-bold">Sign up for an account</h3>
          <div className="mt-6 space-y-3">
            {["Full name", "Email address", "Password"].map((label) => (
              <label key={label} className="block">
                <span className="mb-1 block text-xs text-zinc-400">{label}</span>
                <input
                  className="h-9 w-full rounded-md border border-white/10 bg-white/[0.06] px-3 text-sm outline-none"
                  placeholder={label}
                />
              </label>
            ))}
          </div>
          <button className="mt-5 h-10 w-full rounded-md bg-white text-sm font-bold text-black">
            Sign up
          </button>
        </div>
        <div className="hidden items-center justify-center border-l border-white/10 bg-white/[0.05] p-8 md:flex">
          <div className="text-center">
            <div className="mb-3 flex -space-x-2">
              {["AM", "TR", "NS", "IK"].map((item) => (
                <span
                  key={item}
                  className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-zinc-900 bg-lime-300 text-[10px] font-black text-zinc-950"
                >
                  {item}
                </span>
              ))}
            </div>
            <p className="text-sm font-semibold">People build with us</p>
            <p className="mt-2 max-w-52 text-sm text-zinc-400">
              Join founders turning ideas into launch-ready products.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}