<section class="relative bg-white overflow-hidden">
<img class="absolute left-0 top-0" src="flaro-assets/images/sign-in/gradient.svg" alt="">
<div class="relative z-10 flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap">
<div class="w-full">
<div class="md:max-w-lg mx-auto pt-16 md:pb-32">
<a class="mb-28 inline-block" href="#">
<img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
</a>
<h2 class="mb-32 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Sign in and start saving time today.</h2>
<h3 class="mb-9 text-xl font-bold font-heading leading-normal">Why should you join us?</h3>
<ul class="md:max-w-xs">
<li class="mb-5 flex flex-wrap">
<svg class="mr-2" width="25" height="26" viewbox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#4F46E5"></path>
</svg>
<span class="flex-1 font-medium leading-relaxed">The best you can do in no time at all, amazing feature goes here</span>
</li>
<li class="mb-5 flex flex-wrap">
<svg class="mr-2" width="25" height="26" viewbox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#4F46E5"></path>
</svg>
<span class="flex-1 font-medium leading-relaxed">24/7 Support of our dedicated, highly professional team</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="p-4 py-16 flex flex-col justify-center bg-blueGray-100 h-full">
<form class="md:max-w-lg mx-auto">
<label class="block mb-4">
<p class="mb-2 text-gray-900 font-semibold leading-normal">Email Address *</p>
<input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-white outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="signInInput1-1" type="text" placeholder="Enter email address">
</label>
<label class="block mb-5">
<p class="mb-2 text-gray-900 font-semibold leading-normal">Password *</p>
<input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-white outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="signInInput1-2" type="password" placeholder="********">
</label>
<div class="flex flex-wrap justify-between -m-2 mb-4">
<div class="w-auto p-2">
<div class="flex items-center">
<input class="w-4 h-4" id="default-checkbox" type="checkbox" value="">
<label class="ml-2 text-sm text-gray-900 font-medium" for="default-checkbox">Remember Me</label>
</div>
</div>
<div class="w-auto p-2"><a class="text-sm text-indigo-600 hover:text-indigo-700 font-medium" href="#">Forgot Password?</a></div>
</div>
<button class="mb-9 py-4 px-9 w-full text-white font-semibold border border-indigo-700 rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Sign In</button>
<p class="mb-5 text-sm text-gray-500 font-medium text-center">Or continue with</p>
<div class="flex flex-wrap justify-center -m-2">
<div class="w-auto p-2">
<button class="flex items-center p-4 bg-white hover:bg-gray-50 border rounded-lg transition ease-in-out duration-200">
<img class="mr-3" src="flaro-assets/logos/brands/google.svg" alt="">
<span class="font-semibold leading-normal">Sign in with Google</span>
</button>
</div>
<div class="w-auto p-2">
<button class="flex items-center p-4 bg-white hover:bg-gray-50 border rounded-lg transition ease-in-out duration-200">
<img class="mr-3" src="flaro-assets/logos/brands/fb.svg" alt="">
<span class="font-semibold leading-normal">Sign in with Facebook</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 103
- Banners 37
- Blog 122
- Call to action 189
- Cards 29
- Careers 28
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 86
- Features 215
- Footers 123
- Forms 9
- Graphs 38
- HTTP codes 98
- Hero section 144
- How it works 121
- Logo clouds 150
- Modals 29
- Navbar 209
- Navigation (horizontal) 202
- Navigation (vertical) 7
- Newsletter 104
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Projects 6
- Reviews 10
- Rich text 3
- Sign in / Sign up 155
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
Login and registration is a sensitive part of any site. When designing this type of component, one should think very carefully about the amount of data to be obtained, their order and importance. Acquiring new users and maintaining ties with registered users keeps the site alive. That's why Tailwind Sign in and Sing up components collected in Shuffle Editor are refined to a pixel perfect state. When choosing the right version for your project, you certainly won't run out of options!
Choose from many variations of Tailwind sign in and sign up components. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Tailwind sign in/sign up components, code and our editor. Try the demo for free.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
