JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<fieldset>
<label for="searchTerm" class="inlineLabel">Search</label>
<div class="txt txtSearch">
<input class="default-value typeAheadEnabled" id="searchTerm" name="Ntt" type="text" data-default-value="" title="Search Products" autocomplete="off">
</div>
<input type="submit" value="" id="searchSubmit" class="btnSearch img" title="Search Submit Button">

</fieldset>

CSS

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
#search-form .txt {
    vertical-align: middle;
}
div.txt {
    display: inline-block;
}
#search-form-wrap .txtSearch {
    background: #fff;
    border: 1px solid rgba(51,51,51,0.5);
    border-radius: 7px;
    height: 32px;
    margin: 0;
    padding: 0;
    width: 438px;
}

 .txtSearch input {
    color: #676767;
    font-size: 13px;
    font-weight: bold;
    height: 26px;
    padding: 3px 10px;
    width: 370px;
}


 #searchSubmit{
    background: url(http://static.musiciansfriend.com/img/brand/mf/cmn/sprite-mf-global.png?vId=ecom-1.6.1i) no-repeat;
}


 #searchSubmit {
        background-color: #f8b500;
    background-position: -300px 0;
    border-radius: 0 7px 7px 0;
    height: 37px;
    left: 449px;
    position: absolute;
    top: 7px;
    width: 48px;
}