Home
Reuben Enahoro
Login page

Login page

This tailwind example is contributed by Reuben Enahoro, on 01-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Reuben Enahoro

1.2k

Fork Fullscreen

<section class="bg-gray-800 h-screen pt-[10%] relative items-center justify-center">
            <div class="top-blue w-[250px] h-[250px] bg-blue-400 rounded-full absolute top-[10%] left-[50%]"></div>
            <div class="bottom-pink w-[280px] h-[280px] rounded-full absolute top-[50%] left-[12%] lg:left-[30%]"></div>
            <div class="top-orange w-[300px] h-[300px] rounded-full absolute top-[5%] left-[5%] md:left-[23%] lg:left-[30%]"></div>
            <div class="container w-[350px] sm:w-[350px] m-auto text-center p-8 text-white z-10" style="backdrop-filter: blur(20px);">
                    <img 
                      id="passport" 
                      src="https://upload.wikimedia.org/wikipedia/commons/6/67/User_Avatar.png" 
                      alt=""
                      class="mx-auto"  
                    >
                    <p> <span class="text-xl sm:text-2xl">Login Here</span></p>
                
                <hr>
                <form action="POST">
                    <input type="text" id="username" placeholder="Username..." class="w-full mx-auto text-base sm:textlg">
                    <input type="password" id="password" placeholder="Password..." class="w-full mx-auto text-base sm:textlg">
                    <button 
                      type="submit"
                      class="p-2 sm:text-lg bg-blue-500 rounded-2xl m-8 w-36 mx-auto sm:w-48 hover:bg-gradient-to-r hover:from-orange-500 hover:via-pink-500 hover:to-pink-700"
                    >
                    Login
                    </button>

</form>
                <p>If you're new here, click to <a href="#" class="underline hover:text-pink-300">SignUp</a></p>             
            </div>
    
    </section>

Related Examples

authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

11 months ago

2.2k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

4 months ago

1k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

4 months ago

1.4k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

2 months ago

133
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

1 month ago

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

Author:
ORGIN_DREAMS

4 weeks ago

39
Sign up
sign up page

Author:
gidy

4 weeks ago

274
Forgot password?
you can change password an time

Author:
gidy

3 weeks ago

149
Collapsible content

Author:
Rafferty Kim

2 years ago

13.2k
Apple Dock Navigation Bar

Author:
Cristian

5 months ago

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

Author:
Muhammad Rizqi Juniyanto

8 months ago

2.3k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components