JSFiddle - React, Tailwind, and code Playground

by Can

HTML

<div id='container'>
    <div class='inline' id='refine'>Long test blah
        <div class="arrow-down"></div>
    </div>
    
    <input class='inline' id='search' type='text' size='30' />
    <div class='inline' id='submit'>Search</div>
            
    <div class="hidden" id='refineDropdown'>
        <ul id='refineList'></ul>
    </div>
    
    <div class="hidden" id='dropdown'>
        <ul id='list'></ul>
    </div>
    <ul class='hidden'></ul>
    <br class="clearBoth" />
</div>

CSS

body {
    margin:50px;
    font-family:Arial, sans-serif;
    font-size:13px;
}
.inline { float:left; }
.clearBoth { clear:both; }
#refine {    
    position: relative;
    margin-right: -3px;    
    overflow:hidden;
    white-space:nowrap;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    border-radius: 4px 0 0 4px; /* shorthand for border-raius */
    border:1px solid #AAA;
    height:12px;
    padding:6px 15px 6px 6px;
    text-align:center;
    font:11px Helvetica, sans-serif; /* shorthand for font */
    color:#666;
    text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
   ...