JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<div class="input-container">
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>

CSS

.input-container {
    background: url(http://i.stack.imgur.com/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}