JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="scrolling-tabs-header">Scrolling Tabs Angular Directive</div>
<div ng-app="myapp">
    <div class="scrolling-tabs-container" ng-controller="MainCtrl as main">

      <!-- Nav tabs -->
      <scrolling-tabs tabs="{{main.tabs}}" prop-pane-id="paneId" prop-label="label" prop-active="isActive" tab-click="main.handleClickOnTab($event, $index, tab);"></scrolling-tabs>


      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane" ng-class="{ 'active': tabObj.isActive }" id="{{tabObj.paneId}}" ng-repeat="tabObj in main.tabs">{{tabObj.htmlContent}}</div>
      </div>

    </div>
    
</div>

CSS

* {
  box-sizing: border-box; }

.scrolling-tabs-header {
  background-color: #666666;
  color: white;
  font-size: 24px;
  height: 50px;
  padding: 8px 24px; }

.tab-content {
  padding: 20px 30px; }
.scrtabs-tab-container * {
  box-sizing: border-box; }

.scrtabs-tab-container {
  height: 42px; }

.scrtabs-tabs-fixed-container {
  float: left;
  height: 42px;
  overflow: hidden;
  width: 100%; }

.scrtabs-tabs-movable-container {
  position: relative; }

.scrtabs-tab-scroll-arrow {
  border: 1px solid #dddddd;
  border-top: none;
  color: #428bca;
  cursor: pointer;
  float: left;
  font-size: 12px;
  height: 42px;
  margin-bottom: -1px;
  padding-left: 2px;
  padding-top: 13px;
  width: 20px; }
  .scrtabs-tab-scroll-arrow:hover {
    background-color: #eeeeee; }

.scrtabs-tab-container .nav-tabs > li {
  white-space: nowrap; }

JavaScript

var tabs = [
  { paneId: 'tab01', label: 'Tab <strong>1</strong> of 12', htmlContent: 'Tab Number 1 Content', isActive: true },
  { paneId: 'tab02', label: 'Tab <strong>2</strong> of 12', htmlContent: 'Tab Number 2 Content', isActive: false },
  { paneId: 'tab03', label: 'Tab <strong>3</strong> of 12', htmlContent: 'Tab Number 3 Content', isActive: false },
  { paneId: 'tab04', label: 'Tab <strong>4</strong> of 12', htmlContent: 'Tab Number 4 Content', isActive: false },
  { paneId: 'tab05', label: 'Tab <strong>5</strong> of 12', htmlContent: 'Tab Number 5 Content', isActive: false },
  { paneId: 'tab06', label: 'Tab <strong>6</strong> of 12', htmlContent: 'Tab Number 6 Content', isActive: false },
  { paneId: 'tab07', label: 'Tab <strong>7</strong> of 12', htmlContent: 'Tab Number 7 Content', isActive: false },
  { paneId: 'tab08', label: 'Tab <strong>8</strong> of 12', htmlContent: 'Tab Number 8 Content', isActive: false },
  { paneId: 'tab09', label: 'Tab <strong>9</strong> of 12', htmlContent: 'Tab Number 9 Content', isActive: false },
  { paneId: 'tab10', label: 'Tab <strong>10</strong> of 12', htmlContent: 'Tab Number 10 Content', isActive: false },
  { paneId: 'tab11', label: 'Tab <strong>11</strong> of 12', htmlContent: 'Tab Number 11 Content', isActive: false },
  { paneId: 'tab12', label: 'Tab <strong>12</strong> of 12', htmlContent: 'Tab Number 12 Content', isActive: false }
];


// --------------- scrollingTabs.js ---------------
;(function () {
  'use strict';

  var CONSTANTS = {
    CONTINUOUS_SCROLLING_TIMEOUT_INTERVAL: 50, // timeout interval for repeatedly moving the tabs container 
                                                // by one increment while the mouse is held down--decrease to 
                                                // make mousedown continous scrolling faster
    SCROLL_OFFSET_FRACTION: 6, // each click moves the container this fraction of the fixed container--decrease 
                               // to make the tabs...