JSFiddle - React, Tailwind, and code Playground

by BiBA

HTML

<div id="tabs">
                      <ul id="tabMenu">
                    <li><a class="active" href="#productText">Text</a></li>
                    <li><a href="#productDetails">Details</a></li>
                    <li><a href="#productQuestion">Question</a></li>
                  </ul>
                <div id="tabContent">
                  <div class="content active" id="productText">
                      aaaaaaaaaaaaaa aaaaaaaa
                  </div>
                  <div class="content" id="productDetails">
                      bbbbbbbbbbbb bbbbbbbbbbb
                  </div>
                  <div class="content" id="productQuestion">
                    cccccccccc ccccccccccccc
                    </div>
                  </div>    
</div>

CSS

#tabs {
        margin-top: 20px;
        border: 1px solid grey;
        overflow: hidden;
        display: block;
    }

    ul#tabMenu {
        height: 30px;
        display: block;
        overflow: hidden;
    }

    #tabMenu li {
        margin-right: 5px;
        list-style: none;
        float: left;
        cursor: pointer;
    }

    #tabMenu li a {
        font-size: 9px;
        color: #333;
        font-weight: bold;
        text-decoration: none;
        line-height: 30px;
        display: block;
        float: left;
        padding: 0 15px;
        border: 1px solid #ccc;
        border-bottom: 0px;
        -moz-border-radius:3px;
        background:-moz-linear-gradient(-90deg, #fff, #ddd) repeat scroll 0 0 transparent;
    }

    #tabMenu li a:hover {
        color: #000;
        background:-moz-linear-gradient(-90deg, #ddd, #fff) repeat scroll 0 0 transparent;
    }

    #tabMenu li a.active, #tabMenu li a.active:hover {
        font-size: 9px;
        color: #000;
        line-height: 30px;
        background:-moz-linear-gradient(-90deg, #ddd, #fff) repeat scroll 0 0 transparent;
    }

    #tabContent {
        clear: left;
        font-size: 12px;
        color: #333;
        border: 1px solid #ccc;
        padding: 10px;
        line-height: 1.6em;
    }

    #tabContent .content {
        display: none;
    }

    #tabContent .active {
        padding: 5px 10px;
        display: block;
    }
    
    #tabContent a {
        font-size: 10px;
        color: #7d568b;
        font-weight: bold;
        text-decoration: none;
    }

JavaScript

$(document).ready(function(){
      initTabs();
    });

    function initTabs() {
      $('#tabMenu a').bind('click',function(e) {
      e.preventDefault();
      var thref = $(this).attr("href").replace(/#/, '');
      $('#tabMenu a').removeClass('active');
      $(this).addClass('active');
      $('#tabContent div.content').removeClass('active');
      $('#'+thref).addClass('active');
      });
    }