JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div class="panelWhite pa center">
  <div class="panelWhiteHeader pr">SIGN UP</div>
  <div class="contentWrap pr">
    <input class="iWhite pr" type="text" placeholder="Username" />
      <input class="iWhite pr" type="email" placeholder="Email" style="margin-top: -1px;" />
      <input class="iWhite pr" type="email" placeholder="Confirm Email" style="margin-top: -2px;" />
    <input class="iWhite pr" type="password" placeholder="Password" style="margin-top: -3px;" />
      <input class="iWhite pr" type="password" placeholder="Confirm Password" style="margin-top: -4px;" />
      <button class="btnLarge pr" style="width: 100%; top: 5px;">Sign In</button>
      <br /><br /><br />
      Already have an account? <a href="">Sign In</a>
  </div>
</div>

CSS

body {
  background: #eee;
  font-family: "Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a, a:visited {
    text-decoration: none;
    color: #4585f4;
}

.pr { position: relative; }
.pa { position: absolute; }
button { border: none; }

.center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.panelWhite {
  width: 350px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.panelWhiteHeader {
  width: 100%;
  color: #137fc7;
  font-size: 24px;
  text-align: center;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
}

.contentWrap {
  padding: 30px;
  display: block;
}

.iWhite {
  padding: 17px;
  width: 100%;
  box-sizing: border-box;
  background: #fafafa;
  font-size: 16px;
  color: #000;
  border: 1px solid #d3d3d3;
  z-index: 1;
  display: block;
}
.iWhite:focus {
  border: 1px solid #137fc7;
  z-index: 2;
  outline: none;
}

.btnLarge {
    padding: 17px;
    min-width: 100px;
    box-sizing: border-box;
    background: #009688;
    color: #fff;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}