JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="tabs">
    <ul>
        <li><a href="#tab1">Posts</a></li>
        <li><a href="#tab2">Popular</a></li>
        <li><a href="#tab3">Comments</a></li>
        <li><a href="#tab4">Twitter</a></li>
    </ul>
</div>
<div id="panes">
    <div>number 1</div>
    <div>number 2</div>
    <div>number 3</div>
    <div>number 4</div>
</div>

CSS

#tabs {height:40px;width:80%;margin:30px auto 0 auto;border:1px solid #ccc;border-radius:6px;}

#tabs ul {height:100%;width:100%;}
#tabs li {float:left;width:25%;text-align:center;line-height:40px;}
a {text-decoration:none;color:teal;}
#panes {height:300px;width:80%;margin:10px auto;border:1px solid #ccc;border-radius:6px;position:relative;}

#panes div {position:absolute;padding:10px;}

JavaScript

var panes = $('#panes div');
panes.slice(1).hide();
$('#tabs a').click(function(e) {   
   var target = $(this).parent().index();
    if(panes.eq(target).is(':hidden')) {       
        panes.hide();   
        panes.eq(target).fadeIn();    
 }
e.preventDefault();  
});