JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row">

  <div class="col-sm-6 offset-sm-3">

    <form>
      <div class="card login-form">
        <img class="card-img-top" src="http://www.stairway.com.au/media/stairway_logo.gif" alt="logo" />
        <div class="card-block">

          <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control" name="username" />
          </div>

          <div class="form-group">
            <label for="password">Password</label>
            <input class="form-control" type="password" name="password" />
          </div>

          <div class="form-group">
            <div class="btn-group">
              <input class="form-control" type="submit" value="Log in" name="login" />
              <button class="btn btn-link">
                Cancel
              </button>

            </div>
          </div>


        </div>
      </div>

    </form>

  </div>

</div>

CSS

.card.login-form {
  margin-top: 8rem;
  box-shadow: 6px 6px 66px 6px rgba(0,0,0,0.39);
}