Sign In
Simple sign in
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 in</h3>
<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">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">Remember me</label>
</div>
</div>
<div class="field field-button">
<button class="w-full button button-primary">Sign in <your-icon /></button>
</div>
</form>
</div>
Sign in 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 in</h3>
<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">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">Remember me</label>
</div>
</div>
<div class="field field-button">
<button type="button" class="w-full button button-primary">Sign in <your-icon /></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign in 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 in 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 in</h3>
<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">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">Remember me</label>
</div>
</div>
<div class="field field-button">
<button type="button" class="w-full button button-primary">Sign in <i class="bi bi-box-arrow-in-right"></i></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign in 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 In with two sections
View code
<section class="flex flex-wrap items-center justify-center h-screen">
<div class="flex flex-wrap items-center w-full h-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 in</h3>
<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">
<div class="checkbox">
<input type="checkbox" id="remember" class="checkbox" name="checkbox" />
<label for="remember" class="label">Remember me</label>
</div>
</div>
<div class="field field-button">
<button class="w-full button button-primary">Sign in <your-icon /></button>
</div>
<hr class="my-8" />
<p class="mb-2">Sign in 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>
<div class="bg-[url(https://picsum.photos/1280/720?random=1)] w-full h-full sm:w-10/12 md:w-8/12 lg:w-6/12"></div>
</section>