<section class="py-24 lg:py-28 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-3xl mx-auto">
<h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">Create a free account</h2>
<p class="mb-16 text-xl text-white tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
<form class="flex flex-wrap -m-3" action="#">
<div class="w-full md:w-1/2 p-3">
<label class="block">
<input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signUpInput1-1" type="text" placeholder="First Name">
</label>
</div>
<div class="w-full md:w-1/2 p-3">
<label class="block">
<input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signUpInput1-2" type="email" placeholder="Email Address">
</label>
</div>
<div class="w-full md:w-1/2 p-3">
<label class="block">
<input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signUpInput1-3" type="password" placeholder="Password">
</label>
</div>
<div class="w-full md:w-1/2 p-3">
<label class="block">
<input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signUpInput1-4" type="password" placeholder="Confirm Password">
</label>
</div>
<div class="w-full p-3">
<div class="relative flex p-px bg-transparent overflow-hidden rounded-lg">
<div class="inline-block">
<input class="form-input opacity-0 absolute top-px z-10 h-5 w-5" id="signUpCheckbox1-1" type="checkbox" name="confirm" value="yes">
<div class="mr-2.5 text-transparent border border-gray-500 w-5 h-5 relative top-px flex justify-center items-center rounded">
<svg class="w-2.5 h-2.5" width="9" height="7" viewbox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.604248 3.77081L2.68758 5.85415L7.89591 0.645813" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<label class="select-none text-gray-400 tracking-tight" for="signUpCheckbox1-1">
<span>I agree to the</span>
<a class="text-white hover:text-gray-200" href="#">Terms & Conditions & Privacy Policy</a>
</label>
</div>
</div>
<div class="w-full p-3">
<a class="inline-block mb-7 px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Create Free Account</a>
<span class="font-medium text-white tracking-tight">
<span>Already have an account?</span>
<a class="text-red-500 hover:text-red-700 transition duration-200" href="#">Sign In</a>
</span>
</div>
</form>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
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.
