JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- Tabs -->
<ul class="css-tabs">
    <li><a href="#" class="tab">Home</a></li>
    <li><a href="#" class="tab">FAQ</a></li>
    <li><a href="#" class="tab">Contact Us</a></li>
</ul>

<!-- Panes -->
<div class="css-panes">
    <!-- 1st Pane -->
    <div>
        1st Pane Content                
    </div>
    
    <!-- 2nd Pane -->
    <div>
        2nd Pane Content              
    </div>
    <!-- 3rd Pane -->
    <div>
        3rd Pane Content
    </div>
</div>

CSS

/* root element for tabs  */
ul.css-tabs {  
    margin:0 !important; 
    padding:0;
    height:30px;
    border-bottom:0;         
}

/* single tab */
ul.css-tabs li {  
    float:left;     
    padding:0; 
    margin:0;  
    list-style-type:none;    
}

/* link inside the tab. uses a background image */
ul.css-tabs a { 
    float:left;
    font-size:16px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    display:block;
    padding:5px 30px;    
    text-decoration:none;
    border:0;    
    border-bottom:0;
    height:18px;
    background-color: #3366FF;
    color:rgb(255,255,255);
    margin-right:1px;
    position:relative;
    top:1px;    
    outline:0;
    -moz-border-radius:0 0 0 0;    
}

ul.css-tabs a:hover {
    background-color: #993399;
    color:rgb(255,255,255);
}
    
/* selected tab */
ul.css-tabs a.current {
    background-color:rgb(255,255,255);
    border-bottom:0;    
    cursor:default;
    color: #3366FF;
}

    
/* tab pane */
.css-panes {
    border:0;
    border-width:0 0 0 0;
    min-height:500px;
    padding:15px 20px;
    background-color: rgb(255,255,255);    
}

.css-panes h2 { 
    margin-left: 40px;
    height: 18px;
    padding: 10px;
    }
    
.css-panes a {
    color: #03C;
    }    

.tab {
    width:100px;
}

JavaScript

$(function() {
        $(".css-tabs:first").tabs(".css-panes:first > div");
    });