JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="form-wrapper">
    <form class="form-inline" role="form">
        <div class="form-group-wrapper">
            <div class="form-group">                
                <input type="email" class="form-control" id="ejemplo_email_2" placeholder="Email Address">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="ejemplo_password_2" placeholder="Password">
            </div>
        </div>
        <button type="submit" class="btn my-btn">Become a postmate</button>
    </form>
</div>

CSS

.form-wrapper {
    text-align: center;
    padding: 20px;
    background-color: #11404d;
}
.form-inline {
    display: inline-block;
    border-radius: 4px;
    background-color: #fafafa;
    height: 48px;
    min-width: 540px;
}
.form-group-wrapper {
    padding: 7px 0;
    display: inline-block;
    float:left;
}
.form-control {
    border: 0;
    outline: 0;
    box-shadow: none;
    display: inline-block;
    background-color: #fafafa;
}
.form-control:focus{
    box-shadow: none;
}
.form-group{
    margin-bottom: 0;
    display: inline-block;
}
.form-group + .form-group {
    border-left: 2px solid #ddd;
}
.my-btn {
    text-transform: uppercase;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background-color: #35bfd1;
    float: right;
    color: #fff;
    padding: 5px 15px;
}

.my-btn:hover{
    color: #fff;
    background-color: #31b0d5;
}