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.4k

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

1 year ago

2.3k
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

6 months ago

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

Author:
Ahita Bisma Adlula

5 months ago

1.8k
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

3 months ago

346
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

2 months ago

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

Author:
ORGIN_DREAMS

2 months ago

132
Sign up
sign up page

Author:
gidy

2 months ago

512
Forgot password?
you can change password an time

Author:
gidy

2 months ago

369
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

1 month ago

236
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

1 month ago

308
Contact us Form with Responsive

Author:
KULDEEP

3 weeks ago

121
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

329

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components