JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="http://localhost:58410/areas/v1_4_0/content/css/index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://localhost:58410/areas/v1_4_0/content/bundles/js"></script>
<div class="row cap-panel">
<div class="col-sm-12">
<h3>Tab Type 1</h3>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#events" role="tab" data-toggle="tab">Events</a></li>
<li><a href="#attending" role="tab" data-toggle="tab">Form e.g.</a></li>
<li><a href="#colleagues" role="tab" data-toggle="tab">Colleagues</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="events">
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.</p>
</div>
<div class="tab-pane" id="attending">
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.</p>
</div>
<div class="tab-pane" id="colleagues">
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida...
CSS
body { padding: 20px }