JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <div class="divTabs">
        <div id="tab_menu_1" class="tab selected first">PHP</div>
        <div id="tab_menu_2" class="tab">HTML5</div>
        <div id="tab_menu_3" class="tab">CSS3</div>
        <div id="tab_menu_4" class="tab last">JQUERY</div>
    </div>
    <div class="divTabs-container">
        <div id="divTabs_tab_content_1" class="tabcontent" style="display:block;">
            <ul>
                <li><a href="http://www.webstutorial.com/learn-php-php-tutorials-php-part-1/programming/php">Learn PHP | PHP Tutorials | Part 1</a></li>
                <li><a href="http://www.webstutorial.com/learn-php-php-tutorials-php-part-2/programming/php">Learn PHP | PHP Tutorials | Part 2</a></li>
                <li><a href="http://www.webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Learn Codeigniter | Codeigniter Tutorial | Part 1</a></li>
            </ul>
        </div>
        <div id="divTabs_tab_content_2" class="tabcontent">
            <ul>
                <li><a href="http://www.webstutorial.com/html5-air-hockey-game-canvas/html-5">HTML5 Air Hockey Game Using Canvas</a></li>
                <li><a href="http://www.webstutorial.com/html5-css3-admin-panel-dashboard-template/html-5">HTML5 CSS3 Admin Panel | Dashboard Template</a></li>
                <li><a href="http://www.webstutorial.com/range-input-slider-html5-css3/html-5">Range Input Using HTML5 & CSS3</a></li>
            </ul>
        </div>
        <div id="divTabs_tab_content_3" class="tabcontent">
            <ul>
                <li><a href="http://www.webstutorial.com/css3-ui-buttons-set/css3">CSS3 UI Buttons Set</a></li>
                <li><a href="http://www.webstutorial.com/css3-portfolio-menu/css3">CSS3 Powered Portfolio & Menu</a></li>
                <li><a href="http://www.webstutorial.com/css3-image-hover-effects/css3">CSS3 Image Hover Effects</a></li>
            </ul>
        </div>
        <div id="divTabs_tab_content_4"...

CSS

body{
    font-family:Arial;
    font-size:12px;
}

#tabs{
    margin:10px auto;
    width:335px;
}

.tab{
    float:left;
    border:1px solid #e3e3e3;
    border-radius:5px 5px 0 0;
    background:#f3f3f3;
    padding:3px 5px;
    margin-right:3px;
    border-bottom:0px;
    cursor:pointer;
    position:relative;
}

.tabcontent{
    display:none;
    width:300px;
    padding:10px;
    background:#f3f3f3;
    clear:both;
    border:1px solid #e3e3e3;
    border-radius:0px 3px 3px 3px;
}

.selected{
    top:1px;
}

.tabcontent ul {
    padding-left: 20px;
    margin: 0;
}

.tabcontent li {
    color: #555555;
    list-style: square outside none;
}

.tabcontent li a {
    color: #555555;
    line-height: 22px;
    text-decoration: none;
}

JavaScript

function generateTabs(element) {
    jQuery(function($) {
        $("."+element+" .tab[id^=tab_menu]").click(function() {
            var currentDiv=$(this);
            $("."+element+" .tab[id^=tab_menu]").removeClass("selected");
            currentDiv.addClass("selected");
            var index=currentDiv.attr("id").split("tab_menu_")[1];
            $("."+element+"-container .tabcontent").css('display','none');
            $("."+element+"-container #"+element+"_tab_content_"+index).fadeIn();
        });
    });
}

generateTabs('divTabs');