JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="input_label user">
        <label for="name">title</label>
    </div>
    <input name="name" type="text" id="name" class="name" size="30" value="">
</div>
<br>
<div>
    <div class="input_label user">
        <label for="password"></label>
    </div>
    <input name="password" type="text" id="password" class="name" size="30" value="">
</div>

CSS

.input_label {
    -moz-border-radius: 18px 0 0 18px;
    -webkit-border-radius: 18px 0 0 18px;
    background: #EEE;
    border: 1px solid #CCC;
    border-radius: 18px 0 0 18px;
    border-right: 1px solid #FFF;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    margin-right: 0;
    width: 36px;
}
input[type=text] {
    vertical-align: middle;    
    -moz-border-radius: 0 18px 18px 0;
    -webkit-border-radius: 0 18px 18px 0;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 0 18px 18px 0;
    color: #333;
    font: 13px/1.6'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    height: 36px;
    line-height: 24px;
    margin: 0px 8px 0px -5px;
    outline: none;
    padding: 0 3px;
    width: 150px;
}
.user label {
    background:...