JSFiddle - React, Tailwind, and code Playground

by lueichun

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="back">


  <div class="div-center">

      <h3>Login</h3>
      <hr />
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
        <hr />
        <button type="button" class="btn btn-link">Signup</button>
        <button type="button" class="btn btn-link">Reset Password</button>

      </form>

    </span>
  </div>

CSS

.back {
	  background: #e2e2e2;
	  width: 100%;
/*	  height：100%;*/
	  position: absolute;
	  top: 0;
	  bottom: 0;
	}

	.div-center {
	  width: 600px;
	  height: 400px;
	  background-color: #fff;
	  position: absolute;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  margin: auto;
	  /*max-width: 100%;
	  max-height: 100%;
	  overflow: auto;*/
	  padding: 1em 2em;
	  border-bottom: 2px solid #ccc;
	  display: table;
	}