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

640

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

8 months ago

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

1 month ago

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

Author:
Ahita Bisma Adlula

1 month ago

375
Terms of Service Page Template

Author:
Anonymous

2 months ago

493
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

2 weeks ago

49
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.1k
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

8.1k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

1 month ago

457
cards
cards with background animation

Author:
Anonymous

10 months ago

1.8k
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.4k
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

1 month ago

404
Services

Author:
Samuel Abera

2 months ago

708

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components