LoginForm

This tailwind example is contributed by nitro-x, on 15-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author nitro-x

Tailwind v3.4 344 1

Fork Fullscreen

<div class="lg:hidden flex items-center gap-2 mb-8">
        <div class="w-8 h-8 rounded-md bg-[#00A8F5] flex items-center justify-center">
            <span class="font-bold text-white text-sm">A</span>
        </div>
        <span class="font-semibold text-[#0F172A] tracking-tight">
            YourApp
        </span>
    </div>

<div class="mb-8">
        <h1 class="text-3xl font-bold text-[#0F172A]">
            Create Account
        </h1>
        <p class="text-sm text-slate-500 mt-2">
            Fill in your details to create your account.
        </p>
    </div>

<div>
            <label for="name" class="block text-sm font-medium text-[#0F172A] mb-1.5">
                Full Name
            </label>

<div>
            <label for="email" class="block text-sm font-medium text-[#0F172A] mb-1.5">
                Email Address
            </label>

<div>
            <label for="phoneNumber" class="block text-sm font-medium text-[#0F172A] mb-1.5">
                Phone Number
            </label>

<div>
            <label for="password" class="block text-sm font-medium text-[#0F172A] mb-1.5">
                Password
            </label>

<div>
            <label for="confirmPassword" class="block text-sm font-medium text-[#0F172A] mb-1.5">
                Confirm Password
            </label>

<div class="md:col-span-2 pt-3 flex justify-center">
            <button
                type="submit"
                class="w-full md:w-72 h-11 rounded-lg bg-[#00A8F5] text-white text-sm font-semibold hover:bg-[#0284C7] flex items-center justify-center gap-2 transition-colors"
            >
                Create Account
            </button>
        </div>

</form>

<p class="mt-8 text-center text-sm text-slate-500">
        Already have an account?

</div>

Related Examples

GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

1 week ago

135
Login Form
Login Form template using angular

nitro-x

3 months ago

202
login from with fingerprint

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.4k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

wavy kits

1 year ago

1.1k
Neon login Form #3
Login form neon design.

QQ-VVN

1 year ago

853
Login form

Aman kumar

2 years ago

4.7k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Rajesh Maheshwari

1 year ago

2k
Sign In page with google/facebook/twitter buttons

Orion.c

3 years ago

23.1k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

AyDin VM

2 years ago

5.3k
Login

Aman kumar

1 year ago

1k
Sign in form
includes Google login button

Paul Intay

2 years ago

3.7k