JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myInput">
    
    <input type="text" class="Text" placeholder="Username" />
    <span class="icon one"></span>
</div>
<div class="myInput">
    
    <input type="password" class="Text" placeholder="Password" />
    <span class="icon two"></span>
</div>

CSS

.myInput {
    position: relative;
    outline: rgba(0,0,0,.2) dashed 1px;
    padding: 5px;
}

.Text {
    border: #666 solid;
    border-width: 1px 1px 1px 0px;
    clear: both;
}
span.icon {
    float: left;
    border: #666 solid;
    border-width: 1px 0px 1px 1px;
    background: white;
    display: inline-block;
    width: 25px;
    height: 17px;
    margin: 2px -2px;
}
span.icon.one {
    background: url(http://sweetclipart.com/multisite/sweetclipart/files/cat_3_orange.png) no-repeat center center transparent;
    background-size: 12px 12px;
}
span.icon.two {
    background: url(http://www.tomstuder.com/wp-content/uploads/2012/07/dog-011.png) no-repeat center center transparent;
    background-size: 12px 12px;
}