JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrapper">
		<div class="labels">
			<span tabindex="0">
				<label class="tab-label" for="tab-tab1">Tab Caption 1</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
			</span>
			<span tabindex="0">
				<label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
			</span>
		</div>
		<div class="tabs">
			<div class="tab">
				<input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
				<div class="tab-panel">
					<div class="tab-content">
						<h2>Tab 1</h2>
						<p>A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text....

CSS

.wrapper
{	
  width:800px;
  margin-left:auto;
  margin-right:auto;
}

.tab-radio
{
  display:none;
}

.tabs
{
font-size: 0;
margin: 0;
}

.labels
{
  overflow-y: auto;
  white-space: nowrap;
}

.labels .tab-label
{
  background: #eee; 
  border: 1px solid #ccc; 
  display: inline-block;
  font-size: 1rem;
  left: 1px;
  margin-left: -1px;
  padding: 5px; 
  position: relative;
  vertical-align: bottom;
}

.tabs .tab-panel
{
  position: fixed;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 0;
  width: 0;
}

.tabs .tab-content
{
  display: block;
  float: left;
  font-size: 1rem;
  width: 100%;
  white-space: normal;
}

span:focus
{
  outline: none;
}

span:focus > .tab-label
{
  background: white;
}

.tabs .tab [type="radio"]:checked ~ .tab-panel
{
  display: inline;
}