JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid">
    <form class="paypal-form ">
        <div class="logo text-center">
            <i class="fa fa-paypal fa-4x"></i>
        </div>
        <div class="content">
           
            <input id="email" name="email" type="email"  autocomplete="off" placeholder="Email" class="element">
             <input id="email" name="email" type="password"  autocomplete="off" placeholder="Password" class="element"> 
            
            <button class="buttonlogin actionbutton">Log In</button>
                  <div class="forgotlinkholder">
                 <a href="#" >Forgot your email or password ?</a>
                 </div>
             <button class="buttonsignup actionbutton">Sign Up</button>    
        </div>
    </form>
</div>

CSS

.container-fluid {
    padding:30px;
}
.paypal-form {    
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
    background-color:#F7F9FA;
    border-radius:5px;
    padding:60px 20px;
}
.paypal-form .logo {
    margin-bottom:30px;
    color:#003087;
}
.paypal-form .content {
    margin: 0 15%;
    padding: 0 0 10px;
}
.paypal-form .forgotlinkholder{
            margin: 20px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #cbd2d6;
    text-align: center;
}
.paypal-form .forgotlinkholder a,.paypal-form .forgotlinkholder a:link, 
.paypal-form .forgotlinkholder a:visited {
    color: #0079ad;
    font-weight: 400;
    text-decoration: none;
}

.paypal-form .buttonlogin {
    width: 100%;
    height: 44px;
    padding: 0;
    border: 0;
    display: block;
    background-color: #009cde;
    border-radius:5px;
    cursor:pointer;
    color:#fff;
    transition: background-color .4s ease-out;
}
.paypal-form .buttonlogin:hover {
    background-color: #008AC5;
}
.paypal-form .buttonsignup {
    width: 100%;
    height: 44px;
    padding: 0;
    border: 0;
    display: block;
    background-color: #E1E7EB;
    border-radius:5px;
    cursor:pointer;
    color:#222;
    transition: background-color .4s ease-out;
}
.paypal-form .buttonsignup:hover {
   background-color: #D2DBE1;
}
.paypal-form .actionbutton {
    margin-top:10%;
}
.paypal-form .element {
    height: 40px;
    width: 100%;
    padding:0 10px;
    margin-bottom:10px;
    border: 1px solid #9da3a6;
    background: #fff;
    border-radius: 5px;
}