JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://adam.co/lab/jquery/customselect/jquery.customSelect.latest.min.js"></script>
<div id="tabs">
   <ul>
     <li><a href="#tab-1">This is Tab 1</a></li>
     <li><a href="#tab-2">Tab Two</a></li>
   </ul>
    
    
   <div id="tab-1">
     <h3>Tab 1 content</h3> 
       <select class="style">
            <option value="">choose preset...</option>
            <option value="one">two</option>
            <option value="two">something</option>
            <option value="three">4</option>
            <option value="four">5</option>
        </select>
   </div>
    
   <div id="tab-2">
     <h3>Tab 2</h3>
   
       <select class="style">
            <option value="">choose preset...</option>
            <option value="one">two</option>
            <option value="two">something</option>
            <option value="three">4</option>
            <option value="four">5</option>
        </select>
       
   </div>  
  
 </div>

CSS

span.customSelect { 
    font:12px sans-serif;
    background:#fff url(http://i48.tinypic.com/2u7rpec.png) right center no-repeat;
    border:1px solid #ddd;
    color:#555;
    padding:7px 9px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px 2px;
    width:175px;
}


#tabs {
    font-size: 90%;
    margin: 20px 0;
}
#tabs ul {
    float: left;
    background: #fff;
    width: 500px;
    padding-top: 4px;
}
#tabs li {
    margin-left: 8px;
    list-style: none;
}
* html #tabs li {
    display: inline;
}
#tabs li, #tabs li a {
    float: left;
}
#tabs ul li.active {
    border-top:2px #FFFF66 solid;
    background: #FFFFCC;
}
#tabs ul li.active a {
    color: #333333;
}
#tabs div {
    background: #FFFFCC;
    clear: both;
    padding: 15px;
    min-height: 200px;
}
#tabs ul li a {
    text-decoration: none;
    padding: 8px;
    color: #000;
    font-weight: bold;
}

JavaScript

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });

   $('select.style').customSelect();

});