JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Scrollable TabStrip in a Splitter</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.min.css" />
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jszip.min.js"></script>
</head>
<body>
<div id="splitter">
<div>
<div id="tabstrip">
<ul>
<li class="k-state-active">
Tab 1 with long text
</li>
<li>
Tab 2 with long text
</li>
<li>
Tab 3 with long text
</li>
<li>
Tab 4 with long text
</li>
</ul>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit.</p>
</div>
<div>
<p>Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus.</p>
</div>
<div>
<p>Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
</div>
...