Sign Up
Sign up simple
View code
<div class="flex items-center justify-center">
<form class="w-11/12 mx-auto form sm:w-9/12 md:w-6/12 lg:w-4/12">
<h3 class="mb-4">Sign Up</h3>
<div class="field">
<label for="first_name" class="label">First name</label>
<input type="text" class="input" id="first_name" placeholder="John" />
</div>
<div class="field">
<label for="last_name" class="label">Last name</label>
<input type="text" class="input" id="last_name" placeholder="Smith" />
</div>
<div class="field">
<label for="email" class="label">Email / Username</label>
<input type="email" class="input" id="email" placeholder="Email / username" />
</div>
<div class="field">
<label for="password" class="label">Password</label>
<input type="password" class="input" id="password" placeholder="Your password" />
</div>
<div class="field">
<label for="confirm_password" class="label">Confirm password</label>
<input type="password" class="input" id="confirm_password" placeholder="Confirm password" />
</div>
<div class="field">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">I accept the <a href="#" class="link info">terms and conditions</a>.</label>
</div>
</div>
<div class="field field-button">
<button class="w-full button button-primary">Sign up <your-icon /></button>
</div>
</form>
</div>
Sign up with buttons
View code
<div class="flex items-center justify-center">
<form class="w-11/12 mx-auto form sm:w-9/12 md:w-6/12 lg:w-4/12">
<h3 class="mb-4">Sign Up</h3>
<div class="field">
<label for="first_name" class="label">First name</label>
<input type="text" class="input" id="first_name" placeholder="John" />
</div>
<div class="field">
<label for="last_name" class="label">Last name</label>
<input type="text" class="input" id="last_name" placeholder="Smith" />
</div>
<div class="field">
<label for="email" class="label">Email / Username</label>
<input type="email" class="input" id="email" placeholder="Email / username" />
</div>
<div class="field">
<label for="password" class="label">Password</label>
<input type="password" class="input" id="password" placeholder="Your password" />
</div>
<div class="field">
<label for="confirm_password" class="label">Confirm password</label>
<input type="password" class="input" id="confirm_password" placeholder="Confirm password" />
</div>
<div class="field">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">I accept the <a href="#" class="link info">terms and conditions</a>.</label>
</div>
</div>
<div class="field field-button">
<button type="button" class="w-full button button-primary">Sign up <your-icon /></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign Up with:</p>
<div class="flex flex-wrap justify-between gap-4">
<button type="button" class="button button-primary is-small">
<your-icon />
</button>
<button type="button" class="button button-primary is-small">
<your-icon />
</button>
<button type="button" class="button button-info is-small">
<your-icon />
</button>
</div>
</form>
</div>
Sign Up with large buttons
View code
<div class="flex items-center justify-center">
<form class="w-11/12 mx-auto form sm:w-9/12 md:w-6/12 lg:w-4/12">
<h3 class="mb-4">Sign Up</h3>
<div class="field">
<label for="first_name" class="label">First name</label>
<input type="text" class="input" id="first_name" placeholder="John" />
</div>
<div class="field">
<label for="last_name" class="label">Last name</label>
<input type="text" class="input" id="last_name" placeholder="John" />
</div>
<div class="field">
<label for="email" class="label">Email / Username</label>
<input type="email" class="input" id="email" placeholder="Email / username" />
</div>
<div class="field">
<label for="password" class="label">Password</label>
<input type="password" class="input" id="password" placeholder="Your password" />
</div>
<div class="field">
<label for="confirm_password" class="label">Confirm password</label>
<input type="password" class="input" id="confirm_password" placeholder="Confirm password" />
</div>
<div class="field">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">I accept the <a href="#" class="link info">terms and conditions</a>.</label>
</div>
</div>
<div class="field field-button">
<button type="button" class="w-full button button-primary">Sign up <your-icon /></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign Up with:</p>
<div class="flex flex-col gap-4">
<button type="button" class="button button-primary is-small">Facebook <your-icon /></button>
<button type="button" class="button button-secondary is-small">Twitter <your-icon /></button>
<button type="button" class="button button-info is-small">Google <your-icon /></button>
</div>
</form>
</div>
Sign Up with two sections
View code
<section class="flex flex-wrap items-stretch justify-center">
<div
class="bg-[url(https://picsum.photos/1280/720?random=1)] bg-cover bg-no-repeat w-full h-auto sm:w-10/12 md:w-8/12 lg:w-6/12"></div>
<div class="flex flex-wrap items-center w-full p-5 bg-white sm:w-10/12 md:w-8/12 lg:w-6/12 md:p-10">
<form class="form !bg-transparent w-full sm:w-11/12 mx-auto">
<h3 class="mb-4">Sign Up</h3>
<div class="field">
<label for="first_name" class="label">First name</label>
<input type="text" class="input" id="first_name" placeholder="John" />
</div>
<div class="field">
<label for="last_name" class="label">Last name</label>
<input type="text" class="input" id="last_name" placeholder="Smith" />
</div>
<div class="field">
<label for="email" class="label">Email / Username</label>
<input type="email" class="input" id="email" placeholder="Email / username" />
</div>
<div class="field">
<label for="password" class="label">Password</label>
<input type="password" class="input" id="password" placeholder="Your password" />
</div>
<div class="field">
<label for="confirm_password" class="label">Confirm password</label>
<input type="password" class="input" id="confirm_password" placeholder="Confirm password" />
</div>
<div class="field">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">I accept the <a href="#" class="link info">terms and conditions</a>.</label>
</div>
</div>
<div class="field field-button">
<button class="w-full button button-primary">Sign up <your-icon /></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign up with:</p>
<div class="flex flex-wrap justify-between gap-4">
<button type="button" class="button button-primary is-small">
<your-icon />
</button>
<button type="button" class="button button-primary is-small">
<your-icon />
</button>
<button type="button" class="button button-info is-small">
<your-icon />
</button>
</div>
</form>
</div>
</section>