Form Two

<div
  class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <h2
      class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-8 lg:text-3xl"
    >
      Login
    </h2>
    <form class="ml-auto mr-auto mx-auto max-w-lg rounded-lg border">
      <div
        class="flex flex-col gap-4 pt-4 pr-4 pb-4 pl-4 md:pt-8 md:pr-8 md:pb-8 md:pl-8"
      >
        <div class>
          <label
            for="email"
            class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
          >
            Email
          </label>
          <input
            name="email"
            class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
          />
        </div>
        <div class>
          <label
            for="password"
            class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
          >
            Password
          </label>
          <input
            name="password"
            class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
          />
        </div>
        <button
          class="block transition duration-100 active:bg-gray-600 rounded-lg bg-gray-800 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-gray-300 hover:bg-gray-700 focus-visible:ring md:text-base"
        >
          Log in
        </button>
        <div class="relative flex items-center justify-center">
          <span class="inset-x-0 absolute h-px bg-gray-300"></span>
          <span class="relative bg-white pl-4 pr-4 px-4 text-sm text-gray-400">
            Log in with social
          </span>
        </div>
        <button
          class="transition duration-100 active:bg-blue-700 flex items-center justify-center gap-2 rounded-lg bg-blue-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-blue-300 hover:bg-blue-600 focus-visible:ring md:text-base"
        >
          <svg
            class="h-5 w-5 shrink-0"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 0C5.37273 0 0 5.37273 0 12C0 18.0164 4.43182 22.9838 10.2065 23.8516V15.1805H7.23764V12.0262H10.2065V9.92727C10.2065 6.45218 11.8996 4.92655 14.7878 4.92655C16.1711 4.92655 16.9025 5.02909 17.2489 5.076V7.82945H15.2787C14.0525 7.82945 13.6244 8.99182 13.6244 10.302V12.0262H17.2178L16.7302 15.1805H13.6244V23.8773C19.4815 23.0825 24 18.0747 24 12C24 5.37273 18.6273 0 12 0Z"
              fill="white"
            ></path>
          </svg>
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Continue with Facebook
          </span>
        </button>
        <button
          class="transition duration-100 active:bg-gray-200 flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-800 outline-none ring-gray-300 hover:bg-gray-100 focus-visible:ring md:text-base"
        >
          <svg
            class="h-5 w-5 shrink-0"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M23.7449 12.27C23.7449 11.48 23.6749 10.73 23.5549 10H12.2549V14.51H18.7249C18.4349 15.99 17.5849 17.24 16.3249 18.09V21.09H20.1849C22.4449 19 23.7449 15.92 23.7449 12.27Z"
              fill="#4285F4"
            ></path>
            <path
              d="M12.2549 24C15.4949 24 18.2049 22.92 20.1849 21.09L16.3249 18.09C15.2449 18.81 13.8749 19.25 12.2549 19.25C9.12492 19.25 6.47492 17.14 5.52492 14.29H1.54492V17.38C3.51492 21.3 7.56492 24 12.2549 24Z"
              fill="#34A853"
            ></path>
            <path
              d="M5.52488 14.29C5.27488 13.57 5.14488 12.8 5.14488 12C5.14488 11.2 5.28488 10.43 5.52488 9.71V6.62H1.54488C0.724882 8.24 0.254883 10.06 0.254883 12C0.254883 13.94 0.724882 15.76 1.54488 17.38L5.52488 14.29Z"
              fill="#FBBC05"
            ></path>
            <path
              d="M12.2549 4.75C14.0249 4.75 15.6049 5.36 16.8549 6.55L20.2749 3.13C18.2049 1.19 15.4949 0 12.2549 0C7.56492 0 3.51492 2.7 1.54492 6.62L5.52492 9.71C6.47492 6.86 9.12492 4.75 12.2549 4.75Z"
              fill="#EA4335"
            ></path>
          </svg>
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Continue with Google
          </span>
        </button>
      </div>
      <div
        class="flex items-center justify-center bg-gray-100 pt-4 pr-4 pb-4 pl-4"
      >
        <div class="text-center text-sm text-gray-500">
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Don&apos;t have an account?
          </span>
          <a
            href="#"
            class="transition duration-100 active:text-indigo-700 text-indigo-500 hover:text-indigo-600"
          >
            Register
          </a>
        </div>
      </div>
    </form>
  </div>
</div>