JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<ul id="tabs">
    <li><a href="#" name="#tab1">One</a>
    </li>
    <li><a href="#" name="#tab2">Two</a>
    </li>
    <li><a href="#" name="#tab3">Three</a>
    </li>
</ul>
<div id="content">
    <div id="tab1">
         <h2>Lorem ipsum sit amet</h2>

        <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
        <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>
         <h3>Pellentesque habitant</h3>

        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
    </div>
    <div id="tab2">
         <h2>Vivamus fringilla suscipit justo</h2>

        <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
        <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <div id="tab3">
         <h2>Phasellus non nibh</h2>

        <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
         <h3>Duis pulvinar nibh vel urna</h3>

        <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet.</p>
        <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et.</p>
    </div>
</div>

CSS

#tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#tabs li {
    float: left;
    margin: 0 -15px 0 0;
border-radius: 0 4px 0 0;
}

#tabs a {
    float: left;
    position: relative;
    padding: 0 40px;
    height: 0;
    line-height: 30px;
    text-decoration: none;
    color: #fff;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #3D3D3D;
    border-bottom-color: #777\9;
    opacity: .3;
    filter: alpha(opacity=30);
    box-shadow: -3px 0px 1px 0px rgba(50, 50, 50, 0.75);
    
}

#tabs a:hover, #tabs a:focus {
    border-bottom-color: #3d3d3d;
    opacity: 1;
    filter: alpha(opacity=100);
}

#tabs a:focus {
    outline: 0;
}

#tabs #current {
    z-index: 3;
    border-bottom-color: #2ac7e1;
    color:#000;
    opacity: 1;
    filter: alpha(opacity=100);
}

/* ----------- */

#content {
    background: #fff;
    border-top: 2px solid #3d3d3d;
    padding: 2em;

}

#content h2, #content h3, #content p {
    margin: 0 0 15px 0;
}

JavaScript

function resetTabs() {
      $("#content > div").hide(); //Hide all content
      $("#tabs a").attr("id", ""); //Reset id's      
  }

  var myUrl = window.location.href; //get URL
  var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
  var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab

  (function () {
      $("#content > div").hide(); // Initially hide all content
      $("#tabs li:first a").attr("id", "current"); // Activate first tab
      $("#content > div:first").fadeIn(); // Show first tab content

      $("#tabs a").on("click", function (e) {
          e.preventDefault();
          if ($(this).attr("id") == "current") { //detection for current tab
              return;
          } else {
              resetTabs();
              $(this).attr("id", "current"); // Activate this
              $($(this).attr('name')).fadeIn(); // Show content for current tab
          }
      });

      for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
      }
  })();