JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="b2b-popup">
  <div class="sign-in-form">
    <div class="sign-in-container">
      <div class="sign-in-block">
        <div class="heading">
          <svg id="account" xmlns="http://www.w3.org/2000/svg" width="27.129" height="27.129" viewBox="0 0 27.129 27.129">
            <g id="account-circle">
              <path id="Path_682" data-name="Path 682" d="M13.565,0A13.565,13.565,0,1,0,27.129,13.565,13.6,13.6,0,0,0,13.565,0Zm0,4.069a4,4,0,0,1,4.069,4.069,4,4,0,0,1-4.069,4.069A4,4,0,0,1,9.5,8.139,4,4,0,0,1,13.565,4.069Zm0,19.262a9.9,9.9,0,0,1-8.139-4.341c0-2.713,5.426-4.205,8.139-4.205S21.7,16.278,21.7,18.991A9.9,9.9,0,0,1,13.565,23.331Z" fill="#091f40" />
            </g>
          </svg>
          <h2 class="firasans-bold font-34">{{ tr('sign in') }}</h2>
        </div>
        <form action="" class="signIn--form">
          <div class="input">
            <div class="input-head">
              <label for="user-name" class="noto-bold font-13">User name</label>
              <a href="" class="noto-regular font-13 remind-me-btn">Remind me</a>
            </div>
            <input autocomplete="off" type="text" id="user-name" class="font-13 noto-regular">
            <div class="error font-13 noto-regular">Username is required</div>
          </div>
          <div class="input">
            <div class="input-head">
              <label for="password" class="noto-bold font-13">Password</label>
              <a href="" class="noto-regular font-13 forgot-btn">Forget</a>
            </div>
            <input autocomplete="off" type="password" id="password" class="font-13 noto-regular">
            <div class="error font-13 noto-regular">Password is required</div>
          </div>
          <button type="submit" class="font-21 noto-bold">Sign in</button>
          <div class="become">
            <span class="font-13 noto-regular">Become a member: </span>
            <a href="" class="font-13 noto-regular">Registration</a>
          </div>
        </form>
   ...

CSS

.b2b-popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b2b-popup .sign-in-form {
    /* position: relative; */
    top: 100%;
    width: 516px;
    padding-top: 35px;
    transition: .4s;
    opacity: 1;
    transform: translate(0,0px);
}
.b2b-popup .sign-in-form .sign-in-container {
    width: 100%;
    border: 2px solid #A0B4C4;
    position: relative;
    border-radius: 37px;
    background: white;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
.b2b-popup .sign-in-form .sign-in-container .sign-in-block {
    padding: 0 54px;
    padding-top: 38px;
    padding-bottom: 44px;
}
.b2b-popup .sign-in-form .sign-in-container .remind-me-block {
    padding: 0 54px;
    padding-top: 38px;
    padding-bottom: 44px;
    display: none;
}
.b2b-popup .sign-in-form .sign-in-container .forgot-block {
    padding: 0 54px;
    padding-top: 38px;
    padding-bottom: 44px;
    display: none;
}
.b2b-popup .sign-in-form .sign-in-container .heading {
    margin-bottom: 36px;
    display: flex;
    align-items: center;
}
.b2b-popup .sign-in-form .sign-in-container .heading svg, .b2b-popup .sign-in-form .sign-in-container .heading img {
    margin-right: 10px;
}
.b2b-popup .sign-in-form form {
    width: 100%;
    display: block;
}
.b2b-popup .sign-in-form form .input {
    width: 100%;
    margin-top: 30px;
}
.b2b-popup .sign-in-form form .input .input-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.b2b-popup .sign-in-form form .input .input-head a {
    text-decoration: underline;
    transition: .6s;
}
.b2b-popup .sign-in-form form .input input {
    width: 100%;
    border-radius: 8px;
    height: 50px;
    border: 1px solid #A0B4C4;
    padding-left: 26px;
    background: white;
    transition: .3s;
}
.b2b-popup .sign-in-form form .input .error {
    color: #D31E43;
    margin-top: 4px;
   ...