JSFiddle - React, Tailwind, and code Playground

by scobban

HTML

<div class="clear">
                    <div class="searchwrap">
                            <input class="searchtext" name="searchbox" type="text" />
                        <em class="options">V</em>
                        <button type="submit" class="searchsubmit" value="Search">GO</button>
                    </div>
                </div>

                <div class="clear">
                    <div class="searchwrap">
                        <b class="filter">Not Installed</b>
                            <input class="searchtext" name="searchbox" type="text" />
                        <em class="clearsearch">X</em>
                        <em class="options">V</em>
                        <button type="submit" class="searchsubmit" value="Search">GO</button>
                    </div>
                </div>

                <div class="clear">
                    <div class="searchwrap">
                        <b class="filter">Computer Lists</b>
                        <b class="filter">Not Installed</b>
                            <input class="searchtext" name="searchbox" type="text" />
                        <em class="clearsearch">X</em>
                        <em class="options">V</em>
                        <button type="submit" class="searchsubmit" value="Search">GO</button>
                    </div>
                </div>

CSS

.searchwrap {width:600px; border:1px solid #ccc; position:relative; height:30px;}
    .searchbox {position:relative;}
    
    .searchbox, .searchsubmit {display:inline-block;}

    input.searchtext {width:450px; background:#ffc; border:0;}


    .filter {font-size:10px; padding:3px; background-color:#f1f1f1; border:1px solid #ddd; border-radius:4px; width:75px; margin:5px; float:left;}
    .filter + input.searchtext {width:363px;}
    .filter + .filter + input.searchtext {width:276;}