Home
Anonymous
Responsive login form with image

Responsive login form with image

Forked from> @lukas-muller/responsive-login-form-with-image

This tailwind example is contributed by Anonymous, on 13-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Anonymous

997

Fork Fullscreen

<section class="bg-gray-100 min-h-screen flex box-border justify-center items-center">
    <div class="bg-[#dfa674] rounded-2xl flex max-w-3xl p-5 items-center">
        <div class="md:w-1/2 px-8">
            <h2 class="font-bold text-3xl text-[#002D74]">Login</h2>
            <p class="text-sm mt-4 text-[#002D74]">If you already a member, easily log in now.</p>

<form action="" class="flex flex-col gap-4">
  1              <input class="p-2 mt-8 rounded-xl border" type="name" name="name" placeholder="Enter your name">
                <div class="relative">
                    <input class="p-2 rounded-xl border w-full" type="password" name="password" id="password" placeholder="Password">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" id="togglePassword"
                        class="bi bi-eye absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer z-20 opacity-100"
                        viewBox="0 0 16 16">
                        <path
                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z">
                        </path>
                        <path
                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z">
                        </path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-eye-slash-fill absolute top-1/2 right-3 -z-1 -translate-y-1/2 cursor-pointer hidden"
                        id="mama" viewBox="0 0 16 16">
                        <path
                            d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z">
                        </path>
                        <path
                            d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z">
                        </path>
                    </svg>
                </div>
                <button class="bg-[#002D74] text-white py-2 rounded-xl hover:scale-105 duration-300 hover:bg-[#206ab1] font-medium" type="submit">Login</button>
            </form>
            <div class="mt-6  items-center text-gray-100">
                <hr class="border-gray-300">
                <p class="text-center text-sm">OR</p>
                <hr class="border-gray-300">
            </div>
            <button class="bg-white border py-2 w-full rounded-xl mt-5 flex justify-center items-center text-sm hover:scale-105 duration-300 hover:bg-[#60a8bc4f] font-medium">
                    <svg class="mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px">
                        <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
                        <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
                        <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
                        <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
                    </svg>

</button>

</div>
        
        
            
        </div>
    
</section>

Related Examples

Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

1 year ago

2.5k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

9 months ago

1.1k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.5k
Login with social media buttons

Author:
TailwindFlex

2 years ago

12.9k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.2k
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

5 months ago

1.2k
Form
form

Author:
Aman kumar

9 months ago

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

Author:
Ahita Bisma Adlula

2 months ago

937
Login
Login

Author:
Amine Ghanim

4 weeks ago

126
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

9 months ago

1.7k
Modern Login 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. 😊🎨

Author:
AyDin VM

1 year ago

5.4k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

20k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components