JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-control">
    <ul class="tab-buttons">
      <li><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
      <li><a href="#tab3">Tab3</a></li>
    </ul>
    <div class="tab-content">
      <div id="tab1">
        <h3>Content for Tab1</h3>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
          sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <p>
          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
          quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
          aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
          pariatur?
        </p>
      </div>
      <div id="tab2">
        <h3>Content for Tab2</h3>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
          sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <p>
          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
          quia non numquam eius modi tempora incidunt ut labore et dolore magnam...

CSS

ul{
    list-style: none;
}

body {
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
    
    font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    text-align: justify;
    margin: 0;
    padding: 0;
    color: #333;
}

a { 
    text-decoration: none;
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6 { color: #189cda; }

.tab-control {
    top: 150px; 
    position: relative;
}

.tab-content{
    width: 800px;
    margin: 0 auto;
    padding: 10px 20px;
    border: 1px solid #999;
background-image: -webkit-gradient(linear, 0 100%, 0 0, color-stop(0.19, rgb(235,235,235)), color-stop(0.65, rgb(247,247,247)));
background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 19%, rgb(247,247,247) 65%);
background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 19%, rgb(247,247,247) 65%);
background-image: -o-linear-gradient(bottom, rgb(235,235,235) 19%, rgb(247,247,247) 65%);
background-image: linear-gradient(bottom, rgb(235,235,235) 19%, rgb(247,247,247) 65%);
    box-shadow: 0px 0px 9px #888;
    z-index: 9;
    position: relative;
    border-radius: 7px;
    }

.tab-buttons {
    position: relative;
    width: 800px;
    margin: 0 auto;
    left: -20px;
    top: -7px;
}
.tab-buttons li{
    display: inline;
}

.tab-buttons li a{
    background: #ececec;
    padding: 7px 10px;
    margin-right: 3px;
    color: #527aab;
    border-radius: 3px 3px 0 0;
    
}

.tab-buttons li a.active {
    position: relative;
    top: -2px;
    padding: 10px 15px;
    background:...

JavaScript

$(document).ready(function(){
    $('ul.tab-buttons').each(function(){
      var $active, $content, $links = $(this).find('a');
      
      $active =          $($links.filter('[href="'+location.hash+'"]')[0] ||             $links[0]);
      $active.addClass('active');
      $content = $($active.attr('href'));

      $links.not($active).each(function () {
          $($(this).attr('href')).hide();
      });

    $(this).on('click', 'a', function(e){
        $active.removeClass('active');
        $content.hide();

        $active = $(this);
        $content = $($(this).attr('href'));

        $active.addClass('active');
        $content.show();

        e.preventDefault();
      });
    });
});