JSFiddle - React, Tailwind, and code Playground
by Keith Jeter
HTML
<div class="col-xs-12 nill">
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li class="active" role="presentation"><a id="tab-1" href="#inbox" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="inbox" aria-expanded="true"><span class="fa fa-envelope blu_clr"></span> InboxInboxInbox</a>
</li>
<li class="" role="presentation"><a id="tab-2" href="#sent" data-toggle="tab" role="tab" tabindex="-1" aria-selected="false" aria-controls="sent"><span class="fa fa-send blu_clr"></span> SentSentSent</a>
</li>
<li class="" role="presentation"><a id="tab-3" href="#saved" data-toggle="tab" role="tab" tabindex="-1" aria-selected="false" aria-controls="saved"><span class="fa fa-folder-open blu_clr"></span> SavedSavedSaved</a>
</li>
<li class="" role="presentation"><a id="tab-4" href="#trash" data-toggle="tab" role="tab" tabindex="-1" aria-selected="false" aria-controls="trash"><span class="fa fa-trash blu_clr"></span> TrashTrashTrash</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="inbox" role="tabpanel" tabindex="0" aria-hidden="false" aria-labelledby="tab-1">
<div class="col-xs-12 nill">
<div class="tupper">
<p>Sample tab content 1</p>
</div>
</div>
</div>
<div class="tab-pane" id="sent" role="tabpanel" tabindex="-1" aria-hidden="true" aria-labelledby="tab-2">
<div class="col-xs-12 nill">
<div class="tupper">
<p>Sample tab content 2</p>
</div>
</div>
</div>
<div class="tab-pane" id="saved" role="tabpanel" tabindex="-1" aria-hidden="true" aria-labelledby="tab-3">
<div class="col-xs-12 nill">
<div class="tupper">
<p>Sample tab content 3</p>
</div>
</div>
</div>
...