Full page login page

This tailwind example is contributed by Anonymous, on 21-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Anonymous

Tailwind v3.4 3.3k 5

Fork Fullscreen

<div class="flex min-h-screen w-full flex-wrap items-stretch bg-white dark:bg-gray-800 max-md:pb-20 max-md:pt-32">
    <div class="grow md:flex md:w-1/2 md:flex-col md:items-center md:justify-center md:py-20">
        <div class="w-full px-4 text-center text-xs lg:w-1/2">
            <h1 class="mb-8 text-2xl font-bold text-gray-800 dark:text-white">Welcome Back</h1>
            <p class="mb-6 text-gray-600 dark:text-gray-400">Access your account to explore our amazing features.</p>
            <form class="flex flex-col gap-6" novalidate="novalidate" onsubmit="return LoginForm();">
                <input id="plan" type="hidden" value="" name="plan">

<div class="relative">
                    <label class="flex cursor-pointer items-center gap-2 text-xs font-medium leading-none text-gray-700 dark:text-gray-200 mb-3" for="email">
                        <span class="">Email Address</span>
                    </label>
                    <input id="email" class="block peer w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-800 placeholder-gray-500 dark:bg-gray-700 dark:text-white dark:border-gray-600 placeholder-gray-400 transition-colors focus:border-indigo-500 focus:outline-0 focus:ring focus:ring-indigo-200 dark:focus:ring-indigo-500" name="" value="" type="email" placeholder="you@example.com">
                </div>

<div class="relative">
                    <label class="flex cursor-pointer items-center gap-2 text-xs font-medium leading-none text-gray-700 dark:text-gray-200 mb-3" for="password">
                        <span class="">Password</span>
                    </label>
                    <div class="relative">
                        <input id="password" class="block peer w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-800 placeholder-gray-500 dark:bg-gray-700 dark:text-white dark:border-gray-600 placeholder-gray-400 transition-colors focus:border-indigo-500 focus:outline-0 focus:ring focus:ring-indigo-200 dark:focus:ring-indigo-500" name="" value="" :type="type" placeholder="Your password">
                        <button class="lqd-show-password absolute right-3 top-1/2 z-10 inline-flex -translate-y-1/2 cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-600" type="button" @click="toggleType()">
                            <svg stroke-width="1.5" :class="inputValueVisible ? 'hidden' : ''" class="w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                                <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
                            </svg>
                            <svg stroke-width="1.5" :class="inputValueVisible ? 'block' : 'hidden'" class="hidden w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
                                <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"></path>
                                <path d="M3 3l18 18"></path>
                            </svg>
                        </button>
                    </div>
                </div>

<div class="my-2 flex justify-between gap-2">
                    <div class="grow">
                        <div class="relative">
                            <label class="flex cursor-pointer items-center gap-2 text-xs font-medium leading-none text-gray-700 dark:text-gray-200" for="remember">
                                <input id="remember" class="peer rounded border-gray-300 dark:border-gray-600 focus:ring focus:ring-indigo-200 dark:focus:ring-indigo-500" name="remember" type="checkbox">
                                <span class="">Remember me</span>
                            </label>
                        </div>
                    </div>
                    <div class="text-right">
                        <a class="text-indigo-600 dark:text-indigo-400" href="/forgot-password">Forgot Password?</a>
                    </div>
                </div>

<input class="hidden" id="recaptcha" value="0">
                <button class="lqd-btn group inline-flex items-center justify-center gap-1.5 font-medium rounded-full transition-all hover:-translate-y-0.5 hover:shadow-xl lqd-btn-primary bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:bg-indigo-700 focus-visible:shadow-indigo-300/10 px-5 py-3" id="LoginFormButton" type="submit">
                    Sign in
                </button>
                <div class="text-gray-600 dark:text-gray-400">
                    By proceeding, you acknowledge and accept our
                    <a class="font-medium text-indigo-600 underline" href="/terms" target="_blank">Terms and
                        Conditions</a>
                    and
                    <a class="font-medium text-indigo-600 underline" href="/privacy-policy" target="_blank">Privacy
                        Policy</a>.
                </div>
            </form>
            <div class="mt-20 text-gray-600 dark:text-gray-400">
                Don't have an account yet?
                <a class="font-medium text-indigo-600 underline" href="/register">Sign up</a>
            </div>
        </div>
    </div>

Related Examples

Login form with social login buttons

Task Master

3 years ago

20.5k
Simple generated login form
Login

Jerome Soriano

9 months ago

642
Simple Sign up form
A responsive simple singup or login form

Emdadul Islam

2 years ago

3k
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
Sign In page with google/facebook/twitter buttons

Orion.c

3 years ago

23.1k
Login Card

Anonymous

2 years ago

3.6k
simple login
simple login

Tanvir Hasan Bappy (Tanvir)

10 months ago

374
Neo-Brutalist Login Form

JUGENDRA GANGWAR

3 weeks ago

31
Responsive login form with image

Lukas Müller

3 years ago

16.6k
Login page
Login and register page, you can reuse both

Abhiraj

1 year ago

2.6k
Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

2 months ago

166
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

9 months ago

778