JSFiddle - React, Tailwind, and code Playground

Login idea for Timezone

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div id="loginform">
    <div id="facebook"><i class="icon-facebook"></i>
        <div id="connect">Connect with Facebook</div>
    </div>
    <div id="mainlogin">
        <div id="or"><i class="icon-lock"></i></div>
         <h1>Please Log In</h1>
        <form action="#">
            <input type="text" placeholder="username or email" value="" required />
            <input type="password" placeholder="password" value="" required />
            <button type="submit"><i class="icon-arrow-right"></i></button>
        </form>
        <div id="note"><a href="#">Forgot your password?</a>
        </div>
    </div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
body {
    background:#222526;
    position:relative;
    padding:20px;
    font-family:verdana;
}
#loginform {
    width:550px;
    height:auto;
    position:relative;
    margin:100px auto 0;
}
input {
    display:block;
    margin:0px auto 15px;
    border-radius:5px;
    background: #333333;
    width:85%;
    padding:12px 20px 12px 10px;
    border:none;
    color:#929999;
    box-shadow:inset 0px 1px 5px #272727;
    font-size:0.8em;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
}
input:focus {
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
    box-shadow: 0px 0px 5px 1px #161718;
}
button {
    background: #ff5f32;
    border-radius:50%;
    border:10px solid #222526;
    font-size:0.9em;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    width:85px;
    height:85px;
    position:absolute;
    right: -42px;
    top: 54px;
    text-align:center;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
}
button:hover {
    background:#222526;
    border-color:#ff5f32;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
}
button i {
    font-size:20px;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
}
button:hover i {
    color:#ff5f32;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -o-transition:0.5s ease;
    -ms-transition:0.5s ease;
    transition:0.5s ease;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color:#929999; }

h1 {
   ...