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" />

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

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

SCSS

html {
  height:100%;
  width:100%;
  display:table;
  }
  body {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }
#login{
	background: red;
  display:inline-table;
  width:1%;
  
	.login-box{
		background: green;
    border-radius: 50%;
    padding:1px;
	
		&__header{
				font-size: 20px
		}
    &__form-usr-details {
      padding:0 1em;
    }

		&__form-usr-details{
				font-size:25px;
		}
    label {
      white-space:nowrap;
    }
	}
}