Sign Up Form

A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form Other

Author JUGENDRA GANGWAR

Tailwind v3.4 6

Fork Fullscreen

<div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-indigo-100 p-6 flex items-center justify-center">
  <div
    class="w-full max-w-6xl overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-2xl backdrop-blur-xl">
    <div class="grid lg:grid-cols-2">
      <div class="relative hidden lg:flex flex-col justify-between bg-slate-900 p-10 text-white">
        <div>
          <div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 backdrop-blur">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 3l8 4v5c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V7l8-4z" />
            </svg>
          </div>
          <h2 class="mt-8 text-4xl font-bold leading-tight">
            Build something people love.
          </h2>
          <p class="mt-4 text-sm leading-6 text-slate-300">
            Join thousands of creators and developers using our platform to launch faster and collaborate better.
          </p>
        </div>
        <div class="space-y-4">
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2L12 3z" />
              </svg>
            </div>
            <div>
              <p class="font-medium">10k+ Active Members</p>
              <p class="text-xs text-slate-400">Growing every day</p>
            </div>
          </div>
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" />
              </svg>
            </div>
            <div>
              <p class="font-medium">Fast & Secure</p>
              <p class="text-xs text-slate-400">Enterprise-grade authentication</p>
            </div>
          </div>
        </div>
        <div class="absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-indigo-500/30 blur-3xl"></div>
      </div>
      <div class="p-8 sm:p-10 lg:p-12">
        <div class="mx-auto max-w-md">
          <div class="mb-8">
            <h1 class="text-3xl font-bold text-slate-900">Create account</h1>
            <p class="mt-2 text-sm text-slate-500">
              Start your 14-day free trial. No credit card required.
            </p>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <button class="flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
              <svg class="h-4 w-4" viewBox="0 0 24 24">
                <path fill="#EA4335" d="M12 11v3h7c-.3 1.7-2 5-7 5a8 8 0 1 1 0-16c2.3 0 3.8 1 4.7 1.8l2.5-2.4C17.6 1 15.1 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-2.1H12z"/>
              </svg>
              Google
            </button>
            <button class="flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 .5C5.6.5.5 5.7.5 12.2c0 5.2 3.4 9.6 8.1 11.1.6.1.8-.3.8-.6v-2.3c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.8.1-.8.1-.8 1.2.1 1.8 1.3 1.8 1.3 1 .1 2.1.8 2.6 1.3.1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.4-5.5-6A4.6 4.6 0 0 1 5.2 8c-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.3 11.3 0 0 1 6 0C16.9 4.6 18 5 18 5c.6 1.6.2 2.8.1 3.1a4.6 4.6 0 0 1 1.2 3.2c0 4.6-2.8 5.7-5.5 6 .4.3.8 1 .8 2v3c0 .3.2.7.8.6a11.7 11.7 0 0 0 8.1-11.1C23.5 5.7 18.4.5 12 .5Z"/>
              </svg>
              GitHub
            </button>
          </div>
          <div class="my-6 flex items-center gap-3">
            <div class="h-px flex-1 bg-slate-200"></div>
            <span class="text-xs uppercase tracking-widest text-slate-400">or</span>
            <div class="h-px flex-1 bg-slate-200"></div>
          </div>
          <form class="space-y-5">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="mb-2 block text-sm font-medium text-slate-700">First name</label>
                <input type="text" placeholder="John" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
              </div>
              <div>
                <label class="mb-2 block text-sm font-medium text-slate-700">Last name</label>
                <input type="text" placeholder="Doe" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
              </div>
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">Email address</label>
              <input type="email" placeholder="john@example.com" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium text-slate-700">Password</label>
              <input type="password" placeholder="Create a strong password" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
              <div class="mt-3 flex items-center gap-2">
                <div class="h-1.5 flex-1 rounded-full bg-emerald-500"></div>
                <div class="h-1.5 flex-1 rounded-full bg-emerald-500"></div>
                <div class="h-1.5 flex-1 rounded-full bg-emerald-500"></div>
                <div class="h-1.5 flex-1 rounded-full bg-slate-200"></div>
              </div>
              <p class="mt-2 text-xs text-slate-500">
                Use at least 8 characters with a mix of letters and numbers.
              </p>
            </div>
            <label class="flex items-start gap-3 text-sm text-slate-600">
              <input type="checkbox" class="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
              <span>
                I agree to the
                <a href="#" class="font-medium text-slate-900">Terms</a>
                and
                <a href="#" class="font-medium text-slate-900">Privacy Policy</a>.
              </span>
            </label>
            <button class="w-full rounded-xl bg-slate-900 py-3.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition hover:bg-slate-800">
              Create Account
            </button>
          </form>
          <p class="mt-8 text-center text-sm text-slate-500">
            Already have an account?
            <a href="#" class="font-semibold text-slate-900 hover:underline">
              Sign in
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Image - Figure with figcaption design

Maxim

1 year ago

1.4k
Register Form
A simple and minimalistic register form.

Sonam Sherpa

1 year ago

913
Author Panels

Sherry Lynne

1 month ago

18
3D Login form
Made a responsive and the 3d animative

Sufyan jutt

8 months ago

660
Tailwind Google Map widget

Dung Vuong

1 year ago

921
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
record

Anonymous

1 day ago

5
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

SHARIFUL ISLAM

1 year ago

3.7k
Post Detail
Post detail with form

Sedat Kumcu

1 year ago

2.2k
Privacy Policy
Privacy Policy

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.1k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Muhammad Umair Arshad

1 year ago

1.9k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

1 year ago

3.9k