Summer Sale – Use code oxbow20 at checkout for a 20% discount.

oxbow ui

sign up

1 
<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-zinc-900"
    >
      Sign up, no nonsense
    </h1>
    <p class="text-base mt-4 text-zinc-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-zinc-500 text-sm"
          >Email Address</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <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-zinc-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"
          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-zinc-500 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-blue-500 focus:ring-blue-100 focus:ring-2 focus:outline-none shadow-sm"
          inputmode="email"
        />
      </div>
    </div>
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="password" class="font-medium text-zinc-500 text-sm"
          >Password</label
        >
      </div>
      <div
        class="relative z-0 focus-within:z-10"
        x-data="{ value: &#34;&#34;, showPassword: false }"
      >
        <input
          placeholder="••••••••"
          required
          id="password"
          name="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-zinc-500 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-blue-500 focus:ring-blue-100 focus:ring-2 focus:outline-none 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-zinc-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-zinc-400 hover:text-zinc-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-zinc-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-zinc-500">
      By creating an account, you agree to our
      <a href="#_" class="font-medium text-blue-500 hover:text-zinc-500">
        Terms of service
      </a>
      and
      <a href="#_" class="font-medium text-blue-500 hover:text-zinc-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:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-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-zinc-500">
    Already have an account?
    <a href="#_" class="font-medium text-blue-500 hover:text-zinc-500">
      Sign in
    </a>
  </p>
</div>

simple Sign up block

2

Centered sign up block

3

Split screen signup with testimonial

4

Split screen signup with customers

5

Split screen signup with quote