JSFiddle - React, Tailwind, and code Playground

HTML

<form style="margin-top:40px;" id="search-box" action="">
        <div class="search-tab" data-search-type="catalog" action="http://catalog.com/" onClick="changePlaceholder(this)">Catalog </div>
        <div class="search-tab selected" data-search-type="website" action="https://www.google.com/"onClick="changePlaceholder(this)">Website </div>
         <script>
         function changePlaceholder(div) {
           document.getElementById("search-text").placeholder = 'Search ' + div.innerText;
         }
         </script>
        <a href="t$003f/" target="_blank" style="text-decoration:none">
            <div class="search-tab-link"> Login </div>
        </a>

        <div class="search-tab-content">
            <div class="search-bar">
                <input type="text" id="search-text" placeholder="Search Website" name="q">
                <input type="image" alt="go" id="search-text-icon" title="Search" src="/templates//images/search_website_btn.png">
            </div>
        </div>
        <div id="search-old-catalog"> <a href="http://.com/" target="_blank">Old Catalog</a></div>
     </form>

CSS

div,a,form{margin:0;padding:0;border:0;vertical-align:baseline;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
a{font-weight:700;}
#search-box a{font-weight:400;}
@media handheld, screen and (min-width: 620px){
.search-tab,.search-tab-link{display:inline;color:#fff;background-color:#7bc143;text-decoration:none;padding:8px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.search-tab:hover{background-color:#807f83;}
.search-tab.selected{color:#fff;background-color:#4f2683;}
.search-tab-link{background-color:#009ddc;}
#search-box{position:relative;min-height:100px;clear:both;margin:-71px 0 0;float:right;display:block;z-index:999;padding:0;}
#search-box .search-bar{background:#fff;height:24px;border-bottom:1px solid #807f83;border-left:1px solid #807f83;border-top:1px solid #807f83;}
#search-box input{float:left;margin:0;}
#search-box input:focus{outline:none;}
#search-box #search-text-icon{float:left;width:auto;height:auto;position:absolute;right:0;margin:-1px 15px 0 0;cursor:pointer;}
#search-box #search-text{height:23px;width:75%;border:0;font-size:13px;line-height:23px;font-family:Helvetica, Arial, sans-serif;background:transparent;color:#000;margin:0;padding:0 0 0 11px;}
.search-tab-content{background-color:#4f2683;padding:15px;margin-top:8px;}
#search-old-catalog{text-align:left;}
}
@media screen and (min-width: 1040px){
#search-box{top:40px;}
}
@media handheld, screen and (max-width: 619px){
#search-box{display:none;}
input[type="text"]{-webkit-appearance:none;border-radius:0;}
}