Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed components and styles to help developers create modern and responsive user interfaces quickly. Here are some examples of sign-in and sign-up components that are available in Tailwind CSS:
- Forms: Forms are used to collect user input for signing in or signing up. Tailwind provides pre-designed form styles that can be customized using utility classes. These styles include form inputs, labels, buttons, and validation messages.
- Buttons: Buttons are used to trigger the sign-in or sign-up action. Tailwind offers different button styles, including solid, outlined, and ghost buttons. These buttons can be customized with different colors and sizes.
- Modals: Modals are used to display the sign-in or sign-up form. Tailwind provides utility classes to create modals with different styles and animation effects.
- Social Login Buttons: Social login buttons allow users to sign in or sign up using their social media accounts. Tailwind offers pre-designed social login button styles for popular social media platforms such as Facebook, Google, Twitter, and GitHub.
- Password Strength Indicators: Password strength indicators are used to indicate the strength of the user’s password when signing up. Tailwind provides utility classes to create password strength indicators with different styles and colors.
- Error Messages: Error messages are displayed when the user enters incorrect login or sign-up information. Tailwind provides utility classes to style error messages with different colors and sizes.
These are just a few examples of the sign-in and sign-up components available in Tailwind CSS. By using these pre-designed components and utility classes, developers can easily create professional-looking sign-in and sign-up interfaces without spending too much time on CSS styling.
Component #1
<section class="relative py-20 lg:py-10 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-7xl mx-auto">
<div class="flex flex-wrap -mx-4 xl:items-center">
<div class="w-full lg:w-1/2 xl:w-3/5 px-4 order-last lg:order-first">
<div class="relative max-w-xl mx-auto lg:mx-0 lg:max-w-3xl h-full">
<img class="block w-full h-166 lg:h-full object-cover rounded-3xl" src="saturn-assets/images/sign-up/image-face.png" alt="">
<div class="absolute bottom-0 w-full left-0 p-4 sm:p-6">
<div class="p-6 sm:p-10 backdrop-blur-md backdrop-filter bg-black bg-opacity-30 rounded-5xl">
<h5 class="text-3xl text-white font-semibold mb-2">Selina Destin</h5>
<span class="block text-sm text-white font-semibold mb-6">Web Development Agency</span>
<p class="max-w-xl text-2xl text-white font-semibold mb-15">"Untitled has become essential in starting every new project, we can't imagine working without it."</p>
<div>
<button class="inline-block mr-2 h-1 w-5 rounded-full bg-white hover:bg-blue-100"></button>
<button class="inline-block mr-2 h-1 w-5 rounded-full bg-white hover:bg-blue-100"></button>
<button class="inline-block h-1 w-5 rounded-full bg-blue-900"></button>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 xl:w-2/5 px-4 mb-16 lg:mb-0">
<div class="max-w-md lg:py-20 mx-auto lg:mr-0">
<h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign in to your account</h3>
<p class="text-lg text-gray-500 mb-10">Greetings on your return! We kindly request you to enter your details.</p>
<div class="flex flex-wrap mb-6 items-center -mx-2">
<div class="w-full md:w-1/2 px-2 mb-3 md:mb-0">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-facebook.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Facebook</span>
</a>
</div>
<div class="w-full md:w-1/2 px-2">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-apple.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Apple</span>
</a>
</div>
</div>
<div class="flex mb-6 items-center">
<div class="w-full h-px bg-gray-300"></div>
<span class="mx-4 text-sm font-semibold text-gray-500">Or</span>
<div class="w-full h-px bg-gray-300"></div>
</div>
<form action="">
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
</div>
<div class="mb-7">
<div class="flex mb-1.5 items-center justify-between">
<label class="block text-sm text-gray-900 font-semibold" for="">Password</label>
<a class="inline-block text-xs font-semibold text-orange-900 hover:text-gray-900" href="#">Forget password?</a>
</div>
<div class="relative">
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="Enter your password">
<button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
<img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
</button>
</div>
</div>
<div class="flex mb-6 items-center">
<input type="checkbox" value="" id="">
<label class="ml-2 text-xs text-gray-800" for="">Remember for 30 days</label>
</div>
<button class="relative group block w-full mb-6 py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
<div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<span class="relative">Login</span>
</button>
<span class="text-xs font-semibold text-gray-900">
<span>Don’t have an account?</span>
<a class="ml-1 inline-block text-orange-900 hover:text-orange-700" href="#">Sign up</a>
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Component #2
<section class="relative py-20 2xl:py-10 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-7xl mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
<div class="relative max-w-lg mx-auto lg:mx-0 lg:max-w-2xl h-full">
<img class="block w-full h-142 sm:h-full object-cover rounded-5xl" src="saturn-assets/images/sign-up/dark-background.png" alt="">
<div class="absolute bottom-0 w-full left-0 h-full flex items-center justify-center p-10">
<div class="max-w-md mx-auto">
<h4 class="font-heading text-3xl sm:text-5xl lg:text-6xl text-white font-bold mb-8">Sign in to your account</h4>
<div class="md:flex mb-20">
<div class="mb-6 md:mb-0 md:mr-8 pt-3 text-gray-600">
<svg width="84" height="10" viewbox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
</svg>
</div>
<div>
<p class="text-lg font-semibold text-gray-200">Greetings on your return! We kindly request you to enter your details.</p>
</div>
</div>
<div class="flex items-center">
<div class="flex mr-4 items-center">
<img class="w-10 h-10" src="saturn-assets/images/sign-up/avatar-small-4.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-small-2.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-small-3.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-small-1.png" alt="">
<div class="flex -ml-3 items-center justify-center w-10 h-10 border-2 border-gray-900 bg-gray-50 rounded-full">
<span class="text-gray-900 font-medium">+5</span>
</div>
</div>
<div>
<div>
<div class="flex items-center">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-2" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<span class="font-semibold text-gray-50">5.0</span>
</div>
</div>
<span class="font-semibold text-gray-50">from 200+ reviews</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<div class="max-w-lg lg:pt-8 2xl:pt-24 lg:pb-8 mx-auto 2xl:mr-0">
<h3 class="text-5xl sm:text-6xl text-gray-900 font-bold mb-4">Welcome Back</h3>
<p class="text-lg text-gray-500 mb-15">See our software in action with the demo version.</p>
<div class="flex flex-wrap mb-6 items-center -mx-2">
<div class="w-full md:w-1/2 px-2 mb-3 md:mb-0">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-facebook.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Facebook</span>
</a>
</div>
<div class="w-full md:w-1/2 px-2">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-apple.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Apple</span>
</a>
</div>
</div>
<div class="flex mb-6 items-center">
<div class="w-full h-px bg-gray-300"></div>
<span class="mx-4 text-sm font-semibold text-gray-500">Or</span>
<div class="w-full h-px bg-gray-300"></div>
</div>
<form action="">
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
</div>
<div class="mb-7">
<div class="flex mb-1.5 items-center justify-between">
<label class="block text-sm text-gray-900 font-semibold" for="">Password</label>
<a class="inline-block text-xs font-semibold text-orange-900 hover:text-gray-900" href="#">Forget password?</a>
</div>
<div class="relative">
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="Enter your password">
<button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
<img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
</button>
</div>
</div>
<div class="flex mb-6 items-center">
<input type="checkbox" value="" id="">
<label class="ml-2 text-xs text-gray-800" for="">Remember for 30 days</label>
</div>
<button class="relative group block w-full mb-32 py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
<div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<span class="relative">Login</span>
</button>
<div class="text-center">
<span class="text-xs font-semibold text-gray-900">
<span>Don’t have an account?</span>
<a class="inline-block ml-1 text-orange-900 hover:text-orange-700" href="#">Sign up</a>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Component #3
<section class="relative pt-6 px-4 lg:px-6 pb-20 md:pb-32 overflow-hidden">
<div class="relative max-w-7xl pt-12 sm:pt-28 mx-auto">
<img class="absolute top-0 left-0 object-contain" src="saturn-assets/images/sign-up/background-gradient-color.png" alt="">
<div class="relative container px-4 mx-auto">
<div class="max-w-lg md:max-w-xl py-14 px-6 xs:px-12 lg:px-16 mx-auto bg-white rounded-4xl shadow-lg">
<h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign in to your account</h3>
<p class="text-lg text-gray-500 mb-10">Greetings on your return! We kindly request you to enter your details.</p>
<form action="">
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
</div>
<div class="mb-7">
<div class="flex mb-1.5 items-center justify-between">
<label class="block text-sm text-gray-900 font-semibold" for="">Password</label>
<a class="inline-block text-xs font-semibold text-orange-900 hover:text-gray-900" href="#">Forget password?</a>
</div>
<div class="relative">
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="Enter your password">
<button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
<img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
</button>
</div>
</div>
<div class="flex mb-6 items-center">
<input type="checkbox" value="" id="">
<label class="ml-2 text-xs text-gray-800" for="">Remember for 30 days</label>
</div>
<button class="relative group block w-full mb-6 py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
<div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<span class="relative">Login</span>
</button>
<a class="inline-flex w-full mb-20 py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-apple.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-900">Login with Apple</span>
</a>
<div class="text-center">
<span class="text-xs font-semibold text-gray-900">
<span>Don’t have an account?</span>
<a class="inline-block ml-1 text-orange-900 hover:text-orange-700" href="#">Sign up</a>
</span>
</div>
</form>
</div>
</div>
</div>
</section>
Component #4
<section class="relative py-20 2xl:py-10 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-7xl mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
<div class="relative max-w-lg mx-auto lg:mx-0 lg:max-w-2xl h-full">
<img class="block w-full h-142 sm:h-full object-cover rounded-5xl" src="saturn-assets/images/sign-up/gradient-left.png" alt="">
<div class="absolute bottom-0 w-full left-0 h-full flex items-center justify-center p-10">
<div class="max-w-md mx-auto">
<h4 class="font-heading text-3xl sm:text-5xl lg:text-6xl text-white font-bold mb-8">Sign up to your account</h4>
<div class="md:flex mb-20">
<div class="mb-6 md:mb-0 md:mr-8 pt-3 text-gray-600">
<svg width="84" height="10" viewbox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
</svg>
</div>
<div>
<p class="text-lg font-semibold text-gray-200">Greetings on your return! We kindly request you to enter your details.</p>
</div>
</div>
<div class="flex items-center">
<div class="flex mr-4 items-center">
<img class="w-10 h-10" src="saturn-assets/images/sign-up/avatar-purple-border.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-purple-border-4.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-purple-border-3.png" alt="">
<img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-purple-border-2.png" alt="">
<div class="flex -ml-3 items-center justify-center w-10 h-10 border-2 border-purple-600 bg-gray-50 rounded-full">
<span class="text-gray-900 font-medium">+5</span>
</div>
</div>
<div>
<div>
<div class="flex items-center">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-1" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<img class="mr-2" src="saturn-assets/images/sign-up/yellow-star.svg" alt="">
<span class="font-semibold text-gray-50">5.0</span>
</div>
</div>
<span class="font-semibold text-gray-50">from 200+ reviews</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<div class="max-w-lg lg:pt-8 2xl:pt-16 lg:pb-8 mx-auto 2xl:mr-0">
<h3 class="font-heading text-5xl sm:text-6xl text-gray-900 font-bold mb-4">Welcome!</h3>
<p class="text-lg text-gray-500 mb-15">See our software in action with the demo version.</p>
<div class="flex flex-wrap mb-6 items-center -mx-2">
<div class="w-full md:w-1/2 px-2 mb-3 md:mb-0">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-facebook.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Facebook</span>
</a>
</div>
<div class="w-full md:w-1/2 px-2">
<a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
<img src="saturn-assets/images/sign-up/icon-apple.svg" alt="">
<span class="ml-4 text-sm font-semibold text-gray-500">Login with Apple</span>
</a>
</div>
</div>
<div class="flex mb-6 items-center">
<div class="w-full h-px bg-gray-300"></div>
<span class="mx-4 text-sm font-semibold text-gray-500">Or</span>
<div class="w-full h-px bg-gray-300"></div>
</div>
<form action="">
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Name</label>
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="text" placeholder="Stefano Bojarski">
</div>
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
</div>
<div class="mb-6">
<label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Password</label>
<div class="relative">
<input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="min 12 cars">
<button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
<img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
</button>
</div>
</div>
<div class="flex mb-6 items-center">
<input type="checkbox" value="" id="">
<label class="ml-2 text-xs text-gray-800" for="">Remember me</label>
</div>
<button class="relative group block w-full mb-20 py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
<div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<span class="relative">Login</span>
</button>
<div class="text-center">
<span class="text-xs font-semibold text-gray-900">
<span>Already have an account?</span>
<a class="inline-block ml-1 text-orange-900 hover:text-orange-700" href="#">Sign in</a>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
