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 341 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

Login

Amine Ghanim

1 year ago

3.3k
Login form #2
Login form design

QQ-VVN

1 year ago

1.6k
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

nejaa badr

1 year ago

2.5k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Login form with social login buttons

Task Master

3 years ago

20.4k
Fullscreen login form with image backround

Rithik

2 years ago

2.7k
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

7 months ago

1k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

wavy kits

11 months ago

1.3k
Login Form with Icon

Prashant

4 years ago

18.9k
ÉMERAUDERDV login mobil compo
ÉMERAUDERDV login mobil compo

Omer fils ELENGA

1 week ago

8
Login
Login

Amine Ghanim

1 year ago

2k
Forgot password?
you can change password an time

gidy

1 year ago

1k