JSFiddle - React, Tailwind, and code Playground

by Aya Salama

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" style="text-align: left;">
    <li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li>
    <li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li>
    <li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li>
</ul>
    
<div class="tab-content">

    <div id="first" class="tab-pane fade in active">
        Text
        <a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
        <a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
    </div>
      
    <div id="second" class="tab-pane fade in">
        Text
    </div>

    <div id="third" class="tab-pane fade in">
        Text
    </div>
</div>

CSS

.tab-content{
   padding:20px;
}