JSFiddle - React, Tailwind, and code Playground

by Alex Saskevich

HTML

<html>
  <div id="form">
    <div id="title">Have an account? Sign in</div>
    <input placeholder="Username">
    <input placeholder="Password">
    <div id="button"><a href="#">LOGIN</a></div>
    <div id="checkbox">
      <input id="remember" type="checkbox">
      <label for="remember">Remember me</label>
    </div>
  </div>
</html>

CSS

@import"http://fonts.googleapis.com/css?family=Droid+Sans";

html {
    color: #8d8d8d;
    font: 16px "Droid Sans",sans-serif;
    background: #ed7677;
}

#form {
    width: 300px;
    height: 230px;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 15px gray;
    background: #ededed;
}

#title {
    padding: 15px;
}

input {
    font-size: 14px;
    width: 80%;
    height: 25px;
    padding: 6px 6px 6px 10px;
    margin-bottom: 8px;
    border: 2px solid #e4e4e4;
    color: #959595;
    box-shadow: 0 0 6px #e4e4e4;
}

input:focus {
    box-shadow: 0 0 15px #7dd9d5;
    outline: 0;
}

#button {
    width: 65px;
    padding: 7px 20px;
    font-size: 14px;
    color: #7ea9a1;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    background: #7dd9d5;
}

a:hover,a:visited,a:link,a:active {
    color: inherit;
    width: inherit;
    height: 100%;
    text-decoration: none;
}

#button:hover {
    color: #aee9e1;
    background: #3da9a5;
}

#remember {
    text-align: left;
    width: 14px;
    height: 14px;
    margin-left: 10%;
    border: 1px solid gray;
}

#checkbox {
    text-align: left;
    font-size: 14px;
    outline: 0;
    margin: 20px 150px 5px 5px;
}