JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<div class="tabs-nav-wrap">
                <ul class="tabs-nav">
                    <li class="tab-nav-link" data-target="#tab-one">TAB 1</li>
                    <li class="tab-nav-link" data-target="#tab-two">TAB 2</li>
                    <li class="tab-nav-link" data-target="#tab-three">TAB 3</li>		
                 </ul>
               <div style="clear:both;"></div>
             </div><!-- ends tabs-nav-wrap -->	  
  
  
	     <div class="tabs-main-content">
		 
              <div id="tab-one" class="tab-content"><!-- Begins tab-one -->
                 <div class="tab-inner">
			        <p>Tab 1 content here.</p>
			     </div>
              </div>
      
              <div id="tab-two" class="tab-content"><!-- Begins tab-two -->
                 <div class="tab-inner">
			        <p>Tab 2 content here.</p>
			     </div>
              </div>
	
              <div id="tab-three" class="tab-content"><!-- Begins tab-three -->
                 <div class="tab-inner">
			        <p>Tab 3 content here.</p>
			     </div>
              </div>	
			
	        <div style="clear:both;"></div>
	      </div><!-- # tabs-main-content -->	
        
   
                    <div class="tabs-nav-wrap">
                <ul class="tabs-nav">
                    <li class="tab-nav-link" data-target="#tab-onea">TAB 1</li>
                    <li class="tab-nav-link" data-target="#tab-twoa">TAB 2</li>
                    <li class="tab-nav-link" data-target="#tab-threea">TAB 3</li>		
                 </ul>
               <div style="clear:both;"></div>
             </div><!-- ends tabs-nav-wrap -->	  
  
  
	     <div class="tabs-main-content">
		 
              <div id="tab-onea" class="tab-content"><!-- Begins tab-one -->
                 <div class="tab-inner">
			        <p>Tab 1 content here.</p>
			     </div>
              </div>
      
              <div id="tab-twoa" class="tab-content"><!-- Begins tab-two -->
                 <div class="tab-inner">
			        <p>Tab 2...

CSS

.tabs-nav-wrap {padding:10px 0; text-align: center;}
.tabs-nav-wrap ul {display: inline-block; list-style: none;}

.tabs-nav-wrap ul li {
  list-style: none;
  display: inline-block;

  margin:0 3px;
}
.tabs-nav li {
  list-style: none;
  display: block;
  padding:10px 20px;
  background: #736565;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  color: #fff;
  text-align: left;
  text-decoration: none;
  border:1px solid #615656;
}

.tabs-nav .tab-nav-link.current,
.tabs-nav .tab-nav-link:hover {
  border:1px solid #5eaace;
  background: #74c1e4;
}

.tab-content {padding:20px 0; text-align: center; display:none;}

JavaScript

$(function() {
  $('.tab-content:first-child').show();
  $('.tab-nav-link').bind('click', function(e) {
    $this = $(this);
    //$tabs = $this.parent().parent().next();
    $target = $($this.data("target")); // get the target from data attribute
    $this.siblings().removeClass('current');
    $target.siblings().css("display", "none")
      $this.addClass('current');
      $target.fadeIn("fast");
   
  });
  $('.tab-nav-link:first-child').trigger('click');
});