sign up #01
simple Sign up block
1
Color options
Customize your colors.
<section>
<div class="relative px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div class="max-w-md mx-auto">
<div class="text-center">
<h1
class="text-2xl md:text-3xl lg:text-4xl font-medium tracking-tight text-base-900"
>
Sign up, no nonsense
</h1>
<p class="text-base mt-4 text-base-500 text-balance">
Just your email and a password. That’s it. You’re in.
</p>
</div>
<form class="mt-10 space-y-4">
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="email" class="font-medium text-base-500 text-sm"
>Email Address</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-arrow-mail size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
></path>
<path d="M3 7l9 6l9 -6"></path>
</svg>
</div>
<input
placeholder="you@example.com"
id="email"
name="email"
type="email"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-10 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
inputmode="email"
/>
<div
class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2"
>
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="password" class="font-medium text-base-500 text-sm"
>Password</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="••••••••"
required
id="password"
name="password"
type="password"
x-model="value"
x-bind:type="showPassword ? 'text' : 'password'"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
aria-required="true"
/>
<div
class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2"
>
<button
type="button"
@click="showPassword = !showPassword"
class="text-base-500 focus:outline-none"
tabindex="-1"
aria-label="Toggle password visibility"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-external-link size-4"
x-show="!showPassword"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
></path></svg
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-external-link size-4"
x-show="showPassword"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
<path
d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
></path>
<path d="M3 3l18 18"></path>
</svg></button
><button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<p class="text-xs font-medium text-base-500">
By creating an account, you agree to our
<a href="#_" class="font-medium text-blue-500 hover:text-base-500">
Terms of service
</a>
and
<a href="#_" class="font-medium text-blue-500 hover:text-base-500">
Privacy Policy
</a>
</p>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
>
Create account
</button>
</form>
<p class="text-xs mt-4 font-medium text-base-500">
Already have an account?
<a href="#_" class="font-medium text-blue-500 hover:text-base-500">
Sign in
</a>
</p>
</div>
</div>
</section>