sign in

<section>
  <div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="max-w-lg mx-auto">
      <div class="text-center lg:text-balance">
        <img
          class="h-20 mb-12 mx-auto"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        <span
          class="font-mono text-xs font-medium tracking-tight text-blue-600 uppercase"
          >Sign in</span
        >
        <h1
          class="text-3xl mt-4 font-semibold tracking-tight text-gray-900 sm:text-balance"
        >
          Sign in to your account
        </h1>
        <p class="mt-6 text-base font-medium text-gray-500 sm:text-balance">
          Welcome back! Please enter your email and password to sign in.
        </p>
      </div>
      <form action="#" method="POST" class="mx-auto mt-12 max-w-lg">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-500">
            Email
          </label>
          <div class="mt-2.5">
            <input
              type="email"
              name="email"
              id="email"
              autocomplete="email"
              required
              aria-required="true"
              aria-describedby="email-error"
              placeholder="Your email"
              class="block w-full h-10 px-4 py-2 text-sm text-blue-700 duration-300 bg-white border border-transparent rounded-lg shadow appearance-none ring-1 ring-gray-200 placeholder-gray-400 focus:border-gray-300 focus:bg-transparent focus:outline-none focus:ring-blue-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
            />
            <span id="email-error" class="text-red-600 text-sm hidden">
              Please enter a valid email address.
            </span>
          </div>
        </div>
        <div class="mt-10">
          <button
            type="submit"
            class="flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-all duration-200 rounded-lg bg-gradient-to-b from-blue-500 to-blue-600 hover:to-blue-800 shadow focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none w-full"
          >
            Sign in
          </button>
        </div>
        <div class="flex items-center mt-4">
          <p class="text-sm text-gray-500">
            Don't have an account?
            <a class="text-blue-600 hover:text-gray-900" href="#_">Sign up</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</section>