JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="main">
    <div class="icon">
        <p class="text icon">&#61584;</p>
    </div>
    <div class="mainRibbon">
        <input type="text" class="textBoxStyle" placeholder="Enter your username">
        <input type="text" class="textBoxStyle" placeholder="Password">
        <div class="btnLogin">
            <p>Log in</p>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic, 400italic, 600italic, 700italic, 800italic, 300, 400, 600, 700, 800);
 .main {
    position:relative;
    background-color:#16A085;
    width:550px;
    height:350px;
}
.mainRibbon {
    position:relative;
    background-color:#ECF0F1;
    width:70%;
    height:60%;
    margin:0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius:6px;
}
.textBoxStyle {
    position:relative;
    border:1px solid rgba(26, 188, 156, 0);
    border-radius:4px;
    width:80%;
    text-indent:20px;
    box-shadow:none;
    -webkit-box-shadow:none;
    line-height:1.4285;
    -webkit-transition: border-color .25s linear;
    transition: border-color .25s linear;
    margin:6% 10% 0% 10%;
    padding-top:6px;
    padding-bottom:6px;
    padding-left:1px;
}
.textBoxStyle:focus {
    outline:0;
    border-color:rgba(26, 188, 156, 1);
}
.btnLogin {
    background-color:#16A085;
    width:80%;
    border-radius:6px;
    margin:6% 10% 0 10%;
    -webkit-transition: background .25s linear;
    transition: background .25s linear;
}
.btnLogin:hover {
    background-color:#1ABC9C;
    cursor:pointer;
    cursor:hand;
}
.btnLogin > p {
    color:white;
    margin:0;
    padding-top:1%;
    padding-bottom:1%;
    font-family:'Open Sans';
    -webkit-font-smoothing: subpixel-antialiased;
    font-size:17px;
    text-align:center;
}
.icon {
    position:absolute;
    background:rgba(0, 0, 0, 0);
    width:auto;
    height:auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.icon > p {
    color:white;
    font-size:60px;
    line-height:60px;
    padding:0;
    margin:0;
}
/*de sters
.test{
    position:relative;
    background-color:blue;
    width:80%;
    height:30%;
    top:50%;
    -webkit-transform: translateY(-50%);
  -ms-transform:...