JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="tabs">
  <ul>
    <li class="active-tab">
      <a href="#tab-1">First</a>
    </li>
    <li>
      <a href="#tab-2">Second</a>
    </li>
    <li>
      <a href="#tab-3">Third</a>
    </li>
    <li>
      <a href="#tab-4">Fourth</a>
    </li>
  </ul>
  <div>
    <div id="tab-1" class="active-tab-content">
      <h2>First</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="tab-2">
      <h2>Second</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tab-3">
      <h2>Third</h2>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div id="tab-4">
      <h2>Fourth</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
  </div>
</div>

CSS

.tabs{
  margin:40px;
  width:380px;
  font-family:georgia,serif;
  font-size:13px;
  font-style:italic;
  color:#666;
  text-shadow:0 1px rgba(255,255,255,0.9);
}
.tabs>ul,.tabs>div{
  position:relative;
}
.tabs>ul{
  overflow:hidden;
  margin:0;
  padding:0;
  list-style-type:none;
  margin:0 4px;
  padding:3px 0 0 0;
  z-index:2;
}
.tabs>ul>li{
  float:left;
  position:relative;
  margin:-3px -1px 0 0;
}
.tabs>ul>li>a{
  display:inline-block;
  padding:5px 10px;
  text-decoration:none;
  color:#f5f5f5;
  font-weight:bold;
  text-shadow:0 -1px rgba(0,0,0,0.5);
  background:#bbb;
  background:-o-linear-gradient(top, #ddd, #999);
  background:-moz-linear-gradient(top, #ddd, #999);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #999));
  outline:none;
  -webkit-border-radius:4px 4px 0 0;
  -moz-border-radius:4px 4px 0 0;
  border-radius:4px 4px 0 0;
  border:1px solid #888;
  -webkit-box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3);
  -moz-box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3);
}
.tabs>ul>li>a:hover{
  color:#fff;
  background:#ccc;
  background:-o-linear-gradient(top, #eee, #999);
  background:-moz-linear-gradient(top, #eee, #999);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #999));
}
.tabs>ul>li.active-tab>a{
  color:#555;
  text-shadow:0 1px rgba(255,255,255,0.9);
  background:#e5e5e5;
  background:-o-linear-gradient(top, #ddd, #e5e5e5);
  background:-moz-linear-gradient(top, #ddd, #e5e5e5);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #e5e5e5));
  -webkit-box-shadow:inset 0 2px 0 #fff;
  -moz-box-shadow:inset 0 2px 0 #fff;
  box-shadow:inset 0 2px 0 #fff;
  border-bottom-color:#e5e5e5;
}
.tabs>div{
  z-index:1;
  top:-1px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
 ...

JavaScript

(function($){
        $(document).ready(function(){
            var tabs=$(".tabs"),
                tabsLabels=tabs.children("ul"),
                tabLabel=tabsLabels.find("a"),
                tabsContent=tabs.children("div");
            if(tabsLabels.find(".active-tab").length===0){
                /* .active-tab does not exist. Make the 1st tab active */ 
                tabsLabels.children("li:first").addClass("active-tab");
                tabsContent.children("div:first").addClass("active-tab-content");
            }else{
                /* .active-tab exists. Find tab content id based on its children anchor href value */ 
                tabsContent.find(tabsLabels.find(".active-tab a").attr("href")).addClass("active-tab-content");
            }
            tabLabel.click(function(e){
                e.preventDefault();
                var tabID=$(this).attr("href"),
                    targetTab=tabsContent.find(tabID),
                    activeTab=tabsLabels.find(".active-tab"),
                    activeTabContent=tabsContent.find(".active-tab-content");
                activeTab.add(activeTabContent).removeClass("active-tab active-tab-content");
                $(this).parent().addClass("active-tab");
                targetTab.addClass("active-tab-content");
            });
        });
    })(jQuery);