JSFiddle - React, Tailwind, and code Playground

HTML

<div id="promo">

  <div class="promo-panes">
  
    <div class="business">Tab 1</div>
    
    <div>
      <div class="slides">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
        <div>Slide 6</div>
      </div>
    
      <ul class="btns">
        <li class="one"><a href="#">1</a></li>
        <li class="two"><a href="#">2</a></li>
        <li class="three"><a href="#">3</a></li>
        <li class="four"><a href="#">4</a></li>
        <li class="five"><a href="#">5</a></li>
        <li class="six"><a href="#">6</a></li>
      </ul>
    </div>
    
    <div>Tab 3</div>
  </div>
  
  <ul class="promo-tabs">
    <li class="one"><a href="#">Tab 1</a></li>
    <li class="two"><a href="#">Tab 2</a></li>
    <li class="three"><a href="#">Tab 3</a></li>
  </ul>

</div>

CSS

/* -------- Tabs Promo -------- */

#promo { height:302px; margin:20px 0 10px 0; width:1008px; }
.promo-panes { width:1008px; }
.promo-panes { height:200px; }

.promo-tabs { margin:0; padding:0; list-style:none;  width:1008px; clear:both; }
.promo-tabs li { margin:0; font-size:20px; text-transform:uppercase; float:left; width:264px; margin:0 18px 0 0; background:#333333; padding:20px 30px; position:relative; }
.promo-tabs li a { color:#fff; }
.promo-tabs li:last-child { margin:0; } 
.promo-tabs li a.current { background:#00208e; color:#40b124; }

.btns { position:absolute; }
.btns li { margin:0; font-size:20px; text-transform:uppercase; float:left; margin:0 18px 0 0; background:#00208e; padding:20px 30px; }
.btns li a { color:#fff; }

/* -------- Slides Promo -------- */

.slides { width:1008px; background:#00208e; }

JavaScript

$(document).ready(function() {


    //---- Promo Tabs ----- //

    var
    $tabs = $('.promo-tabs a'),
    $panes = $('.promo-panes > div');

    $tabs.click(function(){
      $(this).addClass('current')
      $(this).parent().siblings().find('a').removeClass('current');
      $panes.eq($tabs.index(this)).fadeIn().siblings().hide();
      return false;
        $btns.first().click();
    });

    //Init Promo Tabs
    $tabs.first().click();
    
    
    //---- Slide Tabs ----- //
    
    var $btns = $('.btns a'), $slides = $('.slides > div');

    $btns.click(function(){
      $(this).addClass('current')
      $(this).parent().siblings().find('a').removeClass('current');
      $slides.eq($btns.index(this)).show('slow').siblings().hide('slow');
      return false;
    });
    $btns.first().click();
    
    
    //corners
    $("#promo-tabs li").corner("3px");
    

});