<section class="bg-background">
  <div class="grid grid-cols-1 lg:min-h-screen lg:grid-cols-2">
    <div
      class="relative flex items-center justify-center bg-background px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-24"
    >
      <div class="absolute left-4 top-4">
        <a
          href="#"
          class="text-xs text-foreground/40 transition hover:text-foreground hover:underline"
        >
          <div class="flex items-center gap-[1px]">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M15 6l-6 6l6 6" /></svg
            ><span>Home</span>
          </div></a
        >
      </div>
      <div class="xl:mx-auto xl:w-full xl:max-w-sm 2xl:max-w-md">
        <h2
          class="text-3xl font-bold leading-relaxed text-foreground sm:text-4xl"
        >
          Sign up to KilahUI
        </h2>
        <p class="mt-2 text-base text-gray-600">
          Already have an account?
          <a
            href="#"
            title=""
            class="font-medium text-primary transition-all hover:text-opacity-95 hover:underline focus:text-opacity-95"
            >Login</a
          >
        </p>

        <form action="#" method="POST" class="mt-8">
          <div class="space-y-5">
            <div>
              <label for="" class="text-base font-medium text-foreground">
                Full Name
              </label>
              <div class="relative mt-2.5 text-input/40 focus-within:text-primary">
                <div
                  class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
                >
                  <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="h-5 w-5"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 13a3 3 0 1 0 0 -6a3 3 0 0 0 0 6z" />
                    <path
                      d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"
                    />
                    <path
                      d="M6 20.05v-.05a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v.05"
                    />
                  </svg>
                </div>

                <input
                  type="text"
                  name=""
                  id=""
                  placeholder="Jane Doe"
                  class="block w-full rounded-md border border-input/50 bg-transparent py-2 pl-10 pr-4 text-foreground placeholder-input/20 transition-colors focus:border-primary focus:outline-none focus:ring-0"
                />
              </div>
            </div>

            <div>
              <label for="" class="text-base font-medium text-foreground">
                Email
              </label>
              <div class="relative mt-2.5 text-input/40 focus-within:text-primary">
                <div
                  class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
                >
                  <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="h-5 w-5"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <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 d="M3 7l9 6l9 -6" />
                  </svg>
                </div>

                <input
                  type="email"
                  name=""
                  id=""
                  inputmode="email"
                  placeholder="jdoe@gmail.com"
                  class="block w-full rounded-md border border-input/50 bg-transparent py-2 pl-10 pr-4 text-foreground placeholder-input/20 transition-colors focus:border-primary focus:outline-none focus:ring-0"
                />
              </div>
            </div>

            <div>
             <label for="" class="text-base font-medium text-foreground">
                Password
              </label>
              <div class="relative mt-2.5 text-input/40 focus-within:text-primary">
                <div
                  class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
                >
                  <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="h-5 w-5"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 17v4" />
                    <path d="M10 20l4 -2" />
                    <path d="M10 18l4 2" />
                    <path d="M5 17v4" />
                    <path d="M3 20l4 -2" />
                    <path d="M3 18l4 2" />
                    <path d="M19 17v4" />
                    <path d="M17 20l4 -2" />
                    <path d="M17 18l4 2" />
                    <path d="M9 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                    <path d="M7 14a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2" />
                  </svg>
                </div>

                <input
                  type="password"
                  name=""
                  id=""
                  placeholder="********"
                  class="block w-full rounded-md border border-input/50 bg-transparent py-2 pl-10 pr-4 text-foreground placeholder-input/20 transition-colors focus:border-primary focus:outline-none focus:ring-0"
                />
              </div>
            </div>

            <div class="space-y-5">
              <div>
                <label for="" class="text-base font-medium text-foreground">
                  Confirm Password
                </label>
                <div
                  class="relative mt-2.5 text-input/40 focus-within:text-primary"
                >
                  <div
                    class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
                  >
                    <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="h-5 w-5"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M7 12l5 5l10 -10" />
                      <path d="M2 12l5 5m5 -5l5 -5" />
                    </svg>
                  </div>

                  <input
                    type="confirm"
                    name=""
                    id=""
                    placeholder="********"
                    class="block w-full rounded-md border border-input/50 bg-transparent py-2 pl-10 pr-4 text-foreground placeholder-input/20 transition-colors focus:border-primary focus:outline-none focus:ring-0"
                  />
                </div>
         </div>
            </div>
            <div>
              <button
                type="submit"
                class="inline-flex w-full place-content-center items-center rounded-md bg-gradient-to-r from-primary to-secondary p-2 font-medium transition-all ease-in-out hover:opacity-90 active:translate-y-0.5"
              >
                Sign up
              </button>
            </div>
          </div>
        </form>

        <div class="mt-3 space-y-3">
          <button
            type="button"
    /20        class="hover:bg-accent/5 relative inline-flex w-full items-center justify-center space-x-1 rounded-md border border-input/50/40 p-2 text-base font-semibold transition-all ease-in-out active/20:translate-y-0.5"
          >
            <span>
              <svg
                class="h-6 w-6"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z"
                ></path>
              </svg>
            </span>
            <span>Sign up with Google</span>
          </button>

          <button
            type="button"
            class="hover:bg-accent/5 relative inline-flex w-full items-center justify-center space-x-1 rounded-md border border-input/50/40 p-2 text-base font-semibold transition-all ease-in-out active/20:translate-y-0.5"
          >
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="h-6 w-6"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M15.079 5.999l.239 .012c1.43 .097 3.434 1.013 4.508 2.586a1 1 0 0 1 -.344 1.44c-.05 .028 -.372 .158 -.497 .217a4.15 4.15 0 0 0 -.722 .431c-.614 .461 -.948 1.009 -.942 1.694c.01 .885 .339 1.454 .907 1.846c.208 .143 .436 .253 .666 .33c.126 .043 .426 .116 .444 .122a1 1 0 0 1 .662 .942c0 2.621 -3.04 6.381 -5.286 6.381c-.79 0 -1.272 -.091 -1.983 -.315l-.098 -.031c-.463 -.146 -.702 -.192 -1.133 -.192c-.52 0 -.863 .06 -1.518 .237l-.197 .053c-.575 .153 -.964 .226 -1.5 .248c-2.749 0 -5.285 -5.093 -5.285 -9.072c0 -3.87 1.786 -6.92 5.286 -6.92c.297 0 .598 .045 .909 .128c.403 .107 .774 .26 1.296 .508c.787 .374 .948 .44 1.009 .44h.016c.03 -.003 .128 -.047 1.056 -.457c1.061 -.467 1.864 -.685 2.746 -.616l-.24 -.012z"
                />
                <path
                  d="M14 1a1 1 0 0 1 1 1a3 3 0 0 1 -3 3a1 1 0 0 1 -1 -1a3 3 0 0 1 3 -3z"
                />
              </svg>
            </span>
            <span> Sign up with Apple ID </span>
          </button>
        </div>

        <p class="mt-5 text-sm text-foreground/80">
          By creating an account you are accepting our&nbsp;
          <a
            href="#"
            title=""
            class="text-primary transition-all hover:text-opacity-95 hover:underline"
            >Privacy Policy</a
          >
          &nbsp;&&nbsp;<a
            href="#"
            title=""
            class="text-primary transition-all hover:text-opacity-95 hover:underline"
            >Terms of Service</a
          >
        </p>
      </div>
    </div>

    <div
      class="relative flex items-center bg-gradient-to-l from-primary to-secondary bg-cover px-4 text-foreground max-lg:row-start-1 sm:px-6 md:justify-center lg:overflow-hidden lg:px-8"
    >
      <div
        class="absolute bottom-4 right-4 flex items-center space-x-4 max-lg:left-4 max-lg:justify-between"
      >
        <button
          class="rounded-full bg-background p-1 transition-all hover:text-primary active:scale-95"
        >
          <span class="sr-only">Prev</span
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 md:h-6 md:w-6"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M15 6l-6 6l6 6" />
          </svg>
        </button>
        <button
          class="rounded-full bg-background p-1 transition-all hover:text-primary active:scale-95"
        >
          <span class="sr-only">Next</span
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 md:h-6 md:w-6"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M9 6l6 6l-6 6" />
          </svg>
        </button>
      </div>
      <div
        class="flex max-w-xl flex-col place-content-center items-center rounded-md p-6 text-center text-primary-foreground"
      >
        <blockquote class="rounded-md font-medium md:text-xl">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
          repellendus voluptates deleniti porro ullam numquam autem cum, fugit
          perferendis quod eveniet voluptate ducimus officiis architecto debitis
          dolores vero, in praesentium.
        </blockquote>
        <div class="mt-5 flex flex-col items-center md:mt-10">
          <img
            class="h-20 w-20 rounded-full border-2 border-primary"
            src="https://randomuser.me/api/portraits/women/5.jpg"
            alt=""
          />
          <div>
            <span class="block font-medium">Claudia Prince</span>
            <span class="block text-xs text-primary-foreground/50"
              >CEO at Fake.inc</span
            >
            <div class="mt-2 flex items-center gap-1 md:mt-5">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke-inecap="round"
                stroke-inejoin="round"
                class="h-4 w-4 fill-amber-400 stroke-amber-400"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                />
              </svg>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke-inecap="round"
                stroke-inejoin="round"
                class="h-4 w-4 fill-amber-400 stroke-amber-400"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                />
              </svg>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke-inecap="round"
                stroke-inejoin="round"
                class="h-4 w-4 fill-amber-400 stroke-amber-400"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                />
              </svg>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke-inecap="round"
                stroke-inejoin="round"
                class="h-4 w-4 fill-amber-400 stroke-amber-400"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                />
              </svg>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke-inecap="round"
                stroke-inejoin="round"
                class="h-4 w-4 fill-amber-400 stroke-amber-400"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path
                  d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
#Simple centered card

#Auth form on left testimonial on right

#Auth form on right, image and features on left
