loginpage

<div className="container relative z-10 sm:px-10">
            <div className="block grid-cols-2 gap-4 xl:grid">
              {/* BEGIN: Login Info */}
              <div
                className="flex-col hidden min-h-screen xl:flex"
                style={{ marginLeft: -50 }}
              >
                <div className="my-auto">
                  <img alt="IOTANESIA" src={illustrationUrl} />
                </div>
              </div>
              {/* END: Login Info */}
              {/* BEGIN: Login Form */}
              <section className=" dark:bg-gray-900">
                <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
                  <a
                    href="#"
                    className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
                  ></a>
                  <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                    <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
                      <h1
                        style={{ textAlign: "center" }}
                        className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"
                      >
                        Sign In
                      </h1>
                      <form className="space-y-4 md:space-y-6" action="#">
                        <FormLabel
                          htmlFor="username-input"
                          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                        >
                          User ID
                        </FormLabel>
                        <InputGroup className="mt-1" style={{ marginTop: 0 }}>
                          <InputGroup.Text
                            style={{
                              cursor: "pointer",
                              background: "transparent",
                            }}
                            id="show-password"
                          >
                            <Lottie options={userOption} height={25} width={25} />
                          </InputGroup.Text>
                          <FormInput
                            id="username-input"
                            type="text"
                            className={isEmptyUsername ? "border-danger" : ""}
                            placeholder="User ID"
                            onChange={(e) => onChageUsername(e.target.value)}
                          />
                        </InputGroup>
                        <div style={{ marginTop: 25 }}>
                          <FormLabel
                            htmlFor="password-input"
                            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                          >
                            Password
                          </FormLabel>
                          <InputGroup className="mt-1">
                            <InputGroup.Text
                              style={{
                                cursor: "pointer",
                                background: "transparent",
                              }}
                              id="show-password"
                            >
                              <Lottie
                                options={lockOption}
                                height={25}
                                width={25}
                              />
                            </InputGroup.Text>
                            <FormInput
                              style={{ marginTop: 0, borderRightWidth: 0 }}
                              aria-describedby="show-password"
                              id="password-input"
                              type={isShowPassword ? "text" : "password"}
                              className={isEmptyPassword ? "border-danger" : ""}
                              placeholder="Password"
                              onChange={(e) => onChagePassword(e.target.value)}
                            />
                            <InputGroup.Text
                              onClick={onShowHidePassword}
                              style={{
                                cursor: "pointer",
                                background: "transparent",
                              }}
                              id="show-password"
                            >
                              {isShowPassword ? (
                                <img
                                  style={{ marginTop: 3 }}
                                  height={25}
                                  width={25}
                                  src={eyeHideIcon}
                                />
                              ) : (
                                <img
                                  style={{ marginTop: 3 }}
                                  height={25}
                                  width={25}
                                  src={eyeShowIcon}
                                />
                              )}
                            </InputGroup.Text>
                          </InputGroup>
                        </div>
                        <Button
                          variant="primary"
                          className="w-full px-4 py-3"
                          onClick={(e: React.MouseEvent) => onLogin(e)}
                        >
                          Login
                          <div className="h-5 ml-2 justify-self-end">
                            <Lottie
                              options={chevRightOption}
                            />
                          </div>
                        </Button>
                        {/* <Button
                        variant="primary"
                        className="w-full px-4 py-3"
                        onClick={(e: React.MouseEvent) => onLogin(e)}
                      >
                        {loading ? (
                          <LoadingIcon
                            icon="oval"
                            color="white"
                            className="w-4 h-4 ml-2"
                          />
                        ) : (
                          <>
                            Login
                            <div className="h-5 ml-2 justify-self-end">
                              <Lottie options={chevRightOption} />
                            </div>
                          </>
                        )}
                      </Button> */}
                      </form>
                    </div>
                  </div>
                </div>
              </section>

              {/* END: Login Form */}
            </div>
          </div>