JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="login">
  <div class="header"><img src="https://s1.postimg.org/77s2la2v5r/lg-header-icon.png">
    <h1>ÜYE GİRİŞİ</h1>
  </div>
  <div class="contanier">

  </div>
  <div class="footer">
<div class="register">Üye Ol</div>
<div class="ayrack"></div><div class="ayraca"> </div>
<div class="remember">Bilgilerimi Unuttum</div>

</div>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli:400,700&subset=latin-ext');
body{ font-family: 'Muli', arial, helvetica, sans-serif; font-weight: 400;}

#login {
  width: 400px;
  height: 370px;
  background-color: #ffffff;
  margin: 0px auto;
  margin-top: 25px;
}

#login .header {
  width: 100%;
  height: 100px;
  background-color: #cccccc;

}

#login .header img {
  margin-top: 15px;
  margin-right: 20px;
  float:left;
}
#login .header h1 {
  width:200px;
line-height:60px;
  padding:0px;

   float:left;
 
}

#login .contanier {
  width: 100%;
  height: 218px;
  background-color: #ffffff;
  margin-bottom: 0px auto;
  display: block;
}

#login .footer {
  width: 100%;
  height: 52px;
  background-color: #cccccc;
}
#login .register, #login .remember {
  line-height: 52px;
  height: 52px;
  float:left;
  text-align:center;
}

#login .register:hover, #login .remember:hover { cursor:pointer; background-color:#F15A24;
 }
 #login .register:active, #login .remember:active { background-color:#cdcdcd;
 }

#login .register {width: 158px ;}
#login .remember {width: 238px ;}
#login .ayraca {
  width: 1px;
  line-height: 52px;
  height: 52px;
  background-color:#eeeeee;
  float:left
}
#login .ayrack {
  width: 1px;
  line-height: 52px;
  height: 52px;
  background-color: #aaaaaa;
  float:left
}