JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<h1>State 1</h1><br/>
<div class="filter-column">
    <div class="cat-keyword-search-wrapper">
                <div class="cat-keyword-input"><input name="ctl00$ContentPlaceHolderMainContent$fcMap$tbSearchTerms" type="text" id="tbSearchTerms" class="cat-keyword-search">
                    <span class="icon_clear close-x" style="opacity: 0; display: inline; ">x</span></div>
                <input type="submit" name="ctl00$ContentPlaceHolderMainContent$fcMap$lbSearchTerms" value="Go" id="ctl00_ContentPlaceHolderMainContent_fcMap_lbSearchTerms" accesskey="g" class="gobutton cat-keyword-search-button">
</div>        
</div>

<br/><br/>

<h1>State 2</h1><br/>
<div class="filter-column">
    <div class="cat-keyword-search-wrapper">
                <div class="cat-keyword-input"><input name="ctl00$ContentPlaceHolderMainContent$fcMap$tbSearchTerms" type="text" id="tbSearchTerms" class="cat-keyword-search">
                    <span class="icon_clear close-x">x</span></div>
                <input type="submit" name="ctl00$ContentPlaceHolderMainContent$fcMap$lbSearchTerms" value="Go" id="ctl00_ContentPlaceHolderMainContent_fcMap_lbSearchTerms" accesskey="g" class="gobutton cat-keyword-search-button">
</div>        
</div>

CSS

body{margin:20px;}
.filter-column {min-width: 120px; padding-right: 20px;}
.cat-keyword-search-wrapper {position:relative; padding:0; height:24px;}
.cat-keyword-input{height:22px; float:left; position:relative;}
.cat-keyword-search {width:120px; height:22px; padding:0 25px 0 5px; margin:0; border:1px solid rgba(0,0,0,0.5); border-right:none; z-index:0;}
.cat-keyword-input .close-x{position:absolute; top:4px; right:3px; z-index:1; background:#b0b0b0; color:#fff; padding:0 5px 1px 5px; line-height:13px; font:14px sans-serif; cursor:pointer; text-shadow:1px 1px 0 rgba(0,0,0,0.4); -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; -khtml-border-radius:50px;}
.cat-keyword-input .close-x:hover{background:#8c8c8c;}
.cat-keyword-search-button{z-index:1; float:left; cursor:pointer; height:22px; padding:0 5px; box-sizing:content-box; display:block; border:1px solid rgba(0,0,0,0.5);-moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; -khtml-border-radius:0 5px 5px 0;
background:#ffffff;
background:-moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
background:-webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background:-o-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background:linear-gradient(to bottom, #ffffff 0%,#dddddd 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );}
.cat-keyword-search-button:hover{background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #8c8c8c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#8c8c8c));
background: -webkit-linear-gradient(top, #ffffff 0%,#8c8c8c 100%);
background: -o-linear-gradient(top, #ffffff 0%,#8c8c8c 100%);
background: -ms-linear-gradient(top,...