JSFiddle - React, Tailwind, and code Playground

HTML

<div id="login">
      <div class="login-box">
        <h1 class="login-box__header">
          Login
        </h1>
        <form class="login-box__form-usr-details" action="/somesearchaction" name="search" method="get">
          <label for="user-email">Enter your email </label>
          <input title="Enter user email" placeholder="Enter your email" name="email" id="user-email" type="text"></input>

          <label for="user-password">Enter your password </label>
          <input title="Enter user password" placeholder="Enter your password" name="password" id="user-password" type="text"></input>

          <span class="forgot-pwd btn btn--white">Forgot password?</span>
          <span class="submit btn btn--blue">Login</span>
        </form>
      </div>
    </div>

SCSS

#login{
	background: red;
  
	.login-box{
		background: green;
	  width: 60%;
		height: 60%;
		overflow: auto;
		margin: auto;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
    border-radius: 50%;
	
		&__header{
				font-size: 20px
		}

		&__form-usr-details{
				font-size:25px;
		}
	}
}