Authentication Tailwind Components – SignIn/SignUp
Explore ready-to-use authentication Tailwind components. Quickly build responsive login, signup, and user authentication UI designs.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Show Code
<div class="h-screen w-full relative overflow-hidden">
<div class="absolute top-0 bg-center right-0 bg-cover w-full h-full bg-[url('https://designcools.com/wp-content/uploads/2024/11/bg.jpg');]"></div>
<div class="container px-4 md:px-0 lg:px-12 xl:px-0 mx-auto relative h-full">
<div class="bg-[#b7cad9] absolute w-[50px] right-[200px] h-full"></div>
<div class="bg-[#b7cad9] absolute w-[40px] right-[150px] h-full"></div>
<div class="bg-[#b7cad9] absolute w-[30px] right-[110px] h-full"></div>
<div class="bg-[#b7cad9] absolute w-[20px] right-[80px] h-full" ></div>
<div class="bg-[#b7cad9] absolute w-[10px] right-[60px] h-full" ></div>
<div class="bg-[#b7cad9] absolute w-[5px] right-[45px] h-full" ></div>
<div class="relative hidden flex-col lg:inline-flex h-full justify-center text-white">
<div class="inline-block">
<span class="bg-[#b7cad9] text-black py-2 px-4 rounded-t-xl rounded-br-xl">Nice to see you again.</span>
</div>
<h2 class="mt-6 text-6xl font-bold">Welcome Back</h2>
<p class="max-w-lg mt-6 text-sm tracking-wide leading-relaxed">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt reprehenderit veritatis nesciunt qui corrupti laboriosam animi doloremque. Explicabo hic deleniti facilis ebitis iste?
</p>
</div>
<div
class="absolute overflow-y-auto right-0 sm:right-1/2 sm:translate-x-1/2 lg:translate-x-0 lg:right-6 sm:rounded-3xl max-h-screen top-1/2 -translate-y-2/4 bg-white shadow-2xl z-[10] px-4 xl:px-4 w-full sm:w-[400px] flex flex-col items-center"
>
<div class="w-full py-10 sm:w-[80%]">
<h3 class="text-2xl font-bold">Sign in</h3>
<div class="mt-8">
<label class="block text-sm font-normal mb-2" for="email">Email Address</label>
<input id="email" placeholder="jon.deo@gmail.com" class="placeholder:font-light placeholder:text-sm block w-full px-4 py-2 border border-gray-300 rounded-lg bg-transparent outline-none" type="email" />
</div>
<div class="mt-6">
<div class="flex justify-between mb-2 items-center">
<label class="block text-sm font-normal" for="password">Password</label>
<a href="https://www.google.com" class="text-xs">Forget Password?</a>
</div>
<input id="password" placeholder="Password" class="placeholder:font-light placeholder:text-sm block w-full px-4 py-2 bg-transparent border border-gray-300 rounded-lg outline-none" type="password" />
</div>
<div class="mt-8">
<button class="w-full px-6 py-2.5 text-sm font-medium tracking-wide text-white bg-slate-500 rounded-lg duration-200 transition hover:bg-black">
Sign in
</button>
</div>
<a href="/" class="flex mt-3 hover:bg-gray-100 duration-200 transition items-center justify-center border border-gray-300 rounded-lg">
<div class="py-2 mr-3">
<svg class="w-6 h-6" viewBox="0 0 40 40">
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#FFC107"
/>
<path
d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
fill="#FF3D00"
/>
<path
d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
fill="#4CAF50"
/>
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#1976D2"
/>
</svg>
</div>
<span class="text-sm font-medium text-center">Sign in with Google</span>
</a>
<div class="flex items-center justify-center mt-6">
<a href="https://www.designcools.com" class="text-base font-bold">or Sign Up</a>
</div>
</div>
</div>
</div>
</div>A login page is a critical entry point for any application or website, serving as the gateway to access personalized content and secure areas. Designing an effective login page involves balancing functionality, security, and user experience.
Key Components of a Login Page
- Branding and Visual Identity – Logo Placement, Color Scheme, Typography
- Input Fields – Email, Password, Placeholders/Labels
- Call To Action (CTA) – Login, Forgot Password, Action
- Authentication Options – Sign in with Facebook, google, twitter , Multi-Factor authentication
- Error Messages – Inline validation, Error display
- Security Features – CAPTCHA
Preview
Show Code
<div class="h-screen relative w-full mb-4 overflow-hidden">
<div class="relative z-[10] xl:bg-white bg-[rgba(255,255,255,0.97)] px-4 lg:px-0 w-full sm:w-[400px] h-full flex flex-col justify-center items-center">
<div class="sm:w-[80%] w-full">
<p class="mt-3 text-2xl md:text-4xl uppercase font-extrabold text-center">
Login
</p>
<a href="/" class="flex items-center justify-center mt-8 border border-gray-200 rounded-lg">
<div class="py-2 mr-3">
<svg class="w-6 h-6" viewBox="0 0 40 40">
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#FFC107"
/>
<path
d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
fill="#FF3D00"
/>
<path
d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
fill="#4CAF50"
/>
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#1976D2"
/>
</svg>
</div>
<span class="text-sm font-medium text-center">Sign in with Google</span>
</a>
<div class="flex items-center justify-center mt-6">
<a href="/" class="text-xs text-center uppercase">or login with email</a>
</div>
<div class="mt-6">
<label class="block text-sm font-normal mb-2" for="email">Email Address</label>
<input id="email" placeholder="jon.deo@gmail.com" class="placeholder:font-light placeholder:text-sm block w-full px-4 py-2 border rounded-lg bg-transparent outline-none" type="email" />
</div>
<div class="mt-6">
<div class="flex justify-between mb-2 items-center">
<label class="block text-sm font-normal" for="password">Password</label>
<a href="https://www.google.com" class="text-xs">Forget Password?</a>
</div>
<input id="password" placeholder="Password" class="placeholder:font-light placeholder:text-sm block w-full px-4 py-2 bg-transparent border rounded-lg outline-none" type="password" />
</div>
<div class="mt-8">
<button class="w-full px-6 uppercase py-2.5 text-sm font-medium tracking-wide text-white bg-slate-500 rounded-lg duration-200 transition hover:bg-emerald-800">
Log In
</button>
</div>
<div class="flex items-center justify-center mt-8">
<a href="https://www.designcools.com" class="text-xs font-bold uppercase">or sign up</a>
</div>
</div>
</div>
<div class="absolute hidden top-0 bg-center right-0 sm:block bg-cover w-full xl:w-[calc(100%-200px)] h-full bg-[url('https://designcools.com/wp-content/uploads/2024/11/Screenshot-2024-11-26-at-1.59.39%E2%80%AFPM.png');]"></div>
</div>900+ Tailwind Components
Stay in the loop with everything you need to know.