JSFiddle - React, Tailwind, and code Playground

HTML

<div class="description" itemprop="description">
           
           
           <div>
  <ul class="tabs">
    <li><a href="#tab-1" class="active">Description</a></li>
    <li><a href="#tab-2">Shipping</a></li>
    <li><a href="#tab-3">Reviews</a></li>
  </ul>
  <div id="tab-1">
  <p><span style="line-height: 1.5;">Amazing value for thousands less than other retailers. &nbsp;With 3 inches of premium 5 lb memory foam atop a 7 inch base, this mattress provides excellent support while encouraging proper spinal alignment and sleep position.</span></p>
<ul></ul>
  </div>
  <div id="tab-2" style="display: none;">
  All SFN mattresses include FREE SHIPPING to the contiguous US. You'll receive an email confirmation
    both when your order goes through as well as when it has shipped. The shipping confirmation will
    include tracking info so you can watch your mattress as it moves toward you.
  </div>
  <div id="tab-3" style="display: none;">
    This is a public service announcement.
  </div>        
</div>
         </div>

CSS

ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}

JavaScript

$(document).ready(function() {
    
$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
      
  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
      alert('yep');
  });
});
});