JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
  <ul>
    <li ><a href="#tab1">Bestellingen</a> </li>
    <li  ><a href="#tab6">Voorraad</a> </li>
  </ul>
  <div class="Content_Area">
    <div id="tab1">
    Bestelling content
      </div>
      <!------------------------------------------------------- Tab 6 Voorraad ------------------------------------------------------->
    <div id="tab6"  >
      <div id="tabs">
        <ul>
        <li > <a href="#sub_tab1">Bloemen </a></li>
          <li > <a href="#sub_tab2">Stenen</a></li>
          <li > <a href="#sub_tab3">Hekken</a></li>
          <li > <a href="#sub_tab4">Materiaal</a></li>
        </ul><br>

       
                  <div class="Content_Area"> 
          <!------------------------------------------------------- Tab 1 ------------------------------------------------------->
          <div id="sub_tab1">Bloemen page</div>
          <!------------------------------------------------------- Tab 1 ------------------------------------------------------->
          <div id="sub_tab2">Stenen Page</div>
          <!------------------------------------------------------- Tab 1 ------------------------------------------------------->
          <div id="sub_tab3">Hekken Page</div>
          <div id="sub_tab4">Materiaal Page</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

img{
	border:none;
}
#tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
}
#tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24x;
}
#tabs ul li a {
    position: relative;
    margin-top: 0px;
    display: block;
    margin-left: 1px;
    margin-bottom: 1px;
    line-height: 50px;
    padding-left: 0px;
    background: #007c8c;
    z-index: 9999;
    border: none;
    border-bottom: 0px;
    /*-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;*/
    width: 140px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}
#tabs ul li a:hover, #tabs ul li a.active {
    top: -5px;
    background: #ebd000;
}
#tabs .Content_Area {
    padding: 0 10px;
    clear:both;
    overflow:hidden;
    line-height:19px;
    position: relative;
    top: 20px;
    z-index: 5;
    height: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
p {
    padding-left: 15px;
}
.subTabs #tabs li a{
	width:auto;
	margin:0;
	padding:10px;
}

JavaScript

$(document).ready(function() {
  $('.Content_Area').children('div').addClass('tabPane');
  $('.Content_Area .tabPane:not(":first")').hide();
  $('#tabs li:first-child a').addClass('active');
  $('#tabs ul a').click(function(e) {
    e.preventDefault();
    $(this).parent('li').siblings().children('a').removeClass('active');
    $(this).addClass('active');
    var $target = $(this).attr('href');
    $($target).show().siblings().hide();
    if ($($target).has('div#tabs').length == true) {
      $($target).addClass('subTabs');
      $('.subTabs').find('.tabPane:first').show();
      $('.subTabs').children('#tabs').find('li a').removeClass('active');
      $('.subTabs').children('#tabs').find('li:first-child a').addClass('active');
    }
  });
});