<div class="main-color-background min-h-screen px-6 py-6 flex flex-col justify-center items-center ">

  <!-- loginIn form   -->
  <div class=" py-8 px-14 main-color-background  form-rounded-corners  shadow-custom--outside  flex flex-col items-center max-w-sm ">

    <div class="mb-10">
      <img class="rounded-full mx-auto mb-4 w-20 h-20 object-cover border-4  image__border--gray shadow-custom--outside " src="https://images.unsplash.com/photo-1643031317985-5c527ca8fdbc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MzExMzA2OQ&ixlib=rb-1.2.1&q=80&w=400" alt="avatar">
      <h3 class="font-bold text-xl tracking-wider mb-1">Web Development</h3>
      <h6 class="tracking-widest text-center  text-sm">Made easy!</h6>
    </div>

    <div class="space-y-5 mb-8">
      <div class="shadow-custom--inside flex space-x-2 items-center  rounded-full relative ">
        <span class="ml-5">
          <svg class="icon" viewBox="0 0 512 512" width="15" title="user-alt">
            <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z" />
          </svg>
        </span>
        <span>
          <input class="py-3 bg-transparent  rounded-r-full rounded-l-none outline-none placeholder-gray-600" type="text" id="username" name="username" placeholder="username"></span>

      </div>

      <div class="shadow-custom--inside flex space-x-2 items-center  rounded-full relative  ">
        <span class="ml-5">
          <svg class="icon" viewBox="0 0 448 512" width="15" title="lock">
            <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" />
          </svg>
        </span>

        <span>
          <input class="py-3  bg-transparent  rounded-r-full outline-none placeholder-gray-600 placeholder-text-sm" type="text" id="password" name="password" placeholder="password">

        </span>

      </div>

    </div>

    <div>
      <button class="w-full rounded-full bg-blue-600 hover:bg-blue-400 transition duration-300 delay-75  text-blue-100 text-center  py-2 mb-5 shadow-custom--outside w-full">Login</button>

      <div class="text-gray-700 text-sm space-x-1 text-center">
        <button class="hover:text-blue-600 transition duration-500 delay-75">Forget password?</button>
        <span class="font-bold text-gray-700">or</span>
        <button class="hover:text-blue-600 transition duration-500 delay-75">Sign Up</button>
      </div>

    </div>

  </div>

</div>

.main-color-background {
  background-color: rgba(221, 226, 232);
}

.image__border-gray {
  background-color: rgba(221, 226, 232);
}

.form-rounded-corners {
  border-radius: 40px;
}

.shadow-custom--outside {
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.6),
    6px 6px 10px rgba(0, 0, 0, 0.2);
}

.shadow-custom--inside {
  box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.8),
    inset 8px 8px 4px rgba(0, 0, 0, 0.2);
}

input::placeholder {
  font-size: 14px;
}

.icon {
  fill: rgba(75, 85, 99);
}