JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div id = "signUpForm" class = "center">
    <div id = "avatarHolder" class= "center">
        <img src = "http://imagizer.imageshack.us/v2/100x100q90/837/ota1.jpg" class = "avatar" />
        </div>
    
    <div class = "formFields center">
        <input id = "email"  placeholder= "Email"/>
        <input id = "password" type = "password"  placeholder = "password"/>
        <button id = "signIn">Sign in </button>
    </div>
    
</div>

CSS

#signUpForm {
    width : 100%;
    max-width : 300px;
    height : auto;
    background-color : #ddd;
    padding: 20px;
    box-shadow : 0 3px 4px #aaa;
}
#avatarHolder {
    width : 90px;
}
.avatar {
    height : 90px;
    border : 1px solid #bbb;
    width : 90px;
    border-radius : 90px;
}
.formFields {
    width : 200px;
    margin : 10px;
}
.formFields input {
    line-height : 2;
    width : 100%;
    border-radius : 5px;
    border-style : none;
}
.formFields button {
  background-image:linear-gradient(#6D94BF, #446E9B 50%, #3E648D);
  border:1px solid #345578;
  padding:8px 12px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  color : #FFF;
  width : 100%;
  border-radius : 5px;
}

.center {
    margin-left : auto;
    margin-right : auto;
}