JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1> Dashboard </h1>

<ul class="nav nav-tabs" id="dashboard_tabs">
	<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
	<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
	<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
	<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>

<div class="tab-content">

	<div id="acquisition_tab" class="tab-pane">
		<ul class="nav nav-tabs" id="dashboard_tabs">
			<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
			<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
			<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
		</ul>
	</div>

	<div id="engagement_tab" class="tab-pane">
		<p> Engagement tab </p>
	</div>

	<div id="retention_tab" class="tab-pane">
		<p> Retention tab </p>
	</div>

	<div id="revenue_tab" class="tab-pane">
		<p> Revenue tab </p>
	</div>

	<div id="all_acquisition_tab" class="tab-pane">
        <p> All acquisition </p>
	</div>	
        
	<div id="facebook_acquisition_tab" class="tab-pane">
        <p> Facebook acquisition </p>
	</div>

	<div id="yahoo_acquisition_tab" class="tab-pane">
        <p> Yahoo acquisition </p>
	</div>	

</div>