JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
        <ul id="myTab" class="nav nav-tabs nav-justified">
            <li class="active"><a href="#tab-home" data-value="#home" data-toggle="tab">Home</a></li>
            <li><a href="#tab-fav" data-value="#fav" data-toggle="tab">Favoriets</a></li>
            <li><a href="#tab-fr" data-value="#fr" data-toggle="tab">Friends</a></li>
            <li><a href="#tab-ex" data-value="#ex" data-toggle="tab">Experience</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="tab-home">
                HOME
            </div>
            <div class="tab-pane fade active" id="tab-fav">
                My favoriets
            </div>
            <div class="tab-pane fade active" id="tab-fr">
                My Friends
            </div>
            <div class="tab-pane fade active" id="tab-ex">
                My experience
            </div>
        </div>
    </div>

JavaScript

$(function () {
            var navTabs = $('.nav-tabs a');
            var hash = window.location.hash;
            hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
    
            navTabs.on('shown', function (e) {
                var newhash = $(e.target).attr('data-value');
                window.location.hash = newhash;
            });
        })