JSFiddle - React, Tailwind, and code Playground

by Yure Pereira

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div class=login-page>

   <div class=row>
      <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
         <h1>Sistema Teste<small> versĂŁo 1.0</small></h1>
         <form role=form ng-submit=submit()>
            <div class=form-content>
               <div class=form-group> <input type=text class="form-control input-underline input-lg" placeholder=Email> </div>
               <div class=form-group> <input type=password class="form-control input-underline input-lg" placeholder=Password> </div>
            </div>
            <button type=submit class="btn btn-white btn-outline btn-lg btn-rounded">Login</button> 
         </form>
      </div>
   </div>
</div>

CSS

.login-page {
    background-image: url('nature.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
.login-page h1 {
    font-weight: 300;
}
.login-page h1 small {
    color: gray;
}
.login-page .form-group {
    padding: 8px 0;
}
.login-page .form-content {
    padding: 0;
}

form {
  border: 3px solid #000;
  padding: 15px;
}

form input[type=text],
form input[type=password]{
  border: none;
  border-bottom: 2px solid #000;
  border-radius: 5px;
  box-shadow: none;
}

button {
  border: 1px solid #000 !important;
  border-radius: 25px !important;
  color: #000;
  background: none;
}

::-webkit-input-placeholder {
   color: #000 !important;
}

:-moz-placeholder {
   color: #000 !important;
}

::-moz-placeholder {
   color: #000 !important;
}

:-ms-input-placeholder {  
   color: #000 !important;
}