JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
  <title>Sliding Tab</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//allurewebsolutions.com/allure.js"></script>
  <link href='css/tab2.css' rel='stylesheet' type='text/css' />
  <script src="js/tab2.js" type="text/javascript"></script>
</head>

<body>
  <div id="wrapper">
    <div class="container">
      <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#tab1" class="text-uppercase">Expxnse</a></li>
        <li><a href="#tab2" class="text-uppercase">Tab 2</a></li>
        <li><a href="#tab3" class="text-uppercase">Tab 3</a></li>
      </ul>

      <div class="tab-content">
        <div id="tab1" class="content-pane is-active">
          <p>
            Tab 1 Content example
          </p>
          <!-- /.login-box-body -->
        </div>
        <!-- /#tab1 -->

        <div id="tab2" class="content-pane">
          <p>
            Tab 2 Content
          </p>
          <!-- /.form-box -->
        </div>
        <!-- /#tab2 -->

        <div id="tab3" class="content-pane">
          <p>
            Tab 3 Content
          </p>
          <!-- /.form-box -->
        </div>
        <!-- /#tab2 -->
      </div>
      <!-- /.tab-content -->
    </div>
    <!-- /.container -->

    <div class="container">
      <ul class="nav nav-tabs nav-justified" style="margin-top: 30px">
        <li class="active"><a href="#tab4" class="text-uppercase">Tab 4</a></li>
        <li><a href="#tab5" class="text-uppercase">Tab 5</a></li>
      </ul>

      <div class="tab-content">
        <div id="tab4" class="content-pane is-active">
          <p>
            Tab 4 Content
          </p>
          <!-- /.login-box-body -->
        </div>
        <!-- /#tab1 -->

        <div id="tab5" class="content-pane">
          <p>
            Tab...

CSS

.tab-content {
  position: relative;
  overflow: hidden;
 }
 
 .is-animating {
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    width: auto;
  }

.content-pane {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%) translateY(-50%);
  &.is-active {
    position: relative;
    opacity: 1;
    transform: translateX(0%);
  }
  &.is-exiting {
    opacity: 0;
    transform: translateX(-100%);
  }
  &.is-animating {
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
}

/*// optional styling for CodePen example*/
.nav-tabs li.active a {
  background: #f8f8f8!important;
  border-bottom-color: transparent!important;  
}
.nav-tabs li:not(.active) {
  border-bottom: 1px solid black;
}
.tab-content {
  margin-top: -1px;
  border: 1px solid #ddd;
  border-top: none;
  padding: 50px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #f8f8f8;
}

JavaScript

'use strict';

const Tabs = {
  init() {
    let promise = $.Deferred();
    this.$tabs = $('ul.nav-tabs');
    this.checkHash();
    this.bindEvents();
    this.onLoad();
    return promise;
  },

  checkHash() {
    if (window.location.hash) {
      this.toggleTab(window.location.hash);
    }
  },

  toggleTab(tab) {
    // targets
    var $paneToHide = $(tab).closest('.container').find('div.content-pane').filter('.is-active'),
      $paneToShow = $(tab),
      $tab = this.$tabs.find('a[href="' + tab + '"]');

    // toggle active tab
    $tab.closest('li').addClass('active').siblings('li').removeClass('active');

    // toggle active tab content
    $paneToHide.removeClass('is-active').addClass('is-animating is-exiting');
    $paneToShow.addClass('is-animating is-active');
  },

  showContent(tab) {

  },

  animationEnd(e) {
    $(e.target).removeClass('is-animating is-exiting');
  },

  tabClicked(e) {
    e.preventDefault();
    this.toggleTab(e.target.hash);
  },

  bindEvents() {
    // show/hide the tab content when clicking the tab button
    this.$tabs.on('click', 'a', this.tabClicked.bind(this));

    // handle animation end
    $('div.content-pane').on('transitionend webkitTransitionEnd', this.animationEnd.bind(this));
  },
  
  onLoad() {
    $(window).load(function() {
      $('div.content-pane').removeClass('is-animating is-exiting');
    });
  }
}

Tabs.init();