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

970

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

9 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:
Abhiraj

2 months ago

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

Author:
Ahita Bisma Adlula

2 months ago

1k
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 weeks ago

36
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

9 months ago

2k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

10.6k
Show credit card details

Author:
Manuela Bianka

2 years ago

11.3k
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

3 months ago

695
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

2 months ago

818
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

9 months ago

2.5k
Half filled circle with tailwind

Author:
Alok

2 years ago

12.7k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

2 months ago

371

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components