JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="r1 row" id="anch-story">
	<div class="c1 col-md-12">
		<ul class="nav nav-justified nav-tabs">
			<li class="active">
				<a class="btn-lg" data-toggle="tab" href="#story-tab-1">Vision</a>
			</li>
			<li>
				<a class="btn-lg" data-toggle="tab" href="#story-tab-2">Manufacturing</a>
			</li>
			<li>
				<a class="btn-lg" data-toggle="tab" href="#story-tab-3">Press</a>
			</li>
			<li>
				<a class="btn-lg" data-toggle="tab" href="#story-tab-4">Blog</a>
			</li>
		</ul>
		<!-- End Nav Tabs -->
		<!-- Tab Panes -->
		<div class="tab-content">
			<div class="tab-pane fade in active" id="story-tab-1">
			
			</div>
			
			<div class="tab-pane fade" id="story-tab-2">
			
			</div>
			<div class="tab-pane fade" id="story-tab-3">
			
			</div>
			<div class="tab-pane fade" id="story-tab-4">
                <div id="page-selection" class="text-center">
                    <ul class="pagination bootpag pagination-lg">
                        <li data-lp="1" class="prev disabled"> <a href="javascript:void(0);">
                                &#xf0d9;
                            </a>
                        </li>
                        <li data-lp="1" class="active"> <a href="javascript:void(0);">1</a>
                            
                        </li>
                        <li data-lp="2"> <a href="javascript:void(0);">2</a>
                
                        </li>
                        <li data-lp="2" class="next"> <a href="javascript:void(0);">
                                &#xf0da;
                            </a>
                
                        </li>
                    </ul>
               ...

CSS

.next > a {
    font-family:'Fontawesome';
    content:"\f0d9";
}
.prev > a {
    font-family:'Fontawesome';
    content:"\f0da";
}
.prev > a, .next > a {
    font-size: 2.3em !important;
    max-height: 47px !important;
    padding-top: 2px !important;
    
}

JavaScript

$(document).ready(function(){
    $('#page-selection > ul').attr('title', 'Blog Post Navigation')
        .attr('data-content', 'Use these controls to easily and quickly navigate the blog posts.')
        .attr('data-placement', 'bottom');  
    
    $('a[href="#story-tab-4"]').on('shown.bs.tab', function (e) {
        
        if($(this).data('popover-shown')) return;
        
        $(this).data('popover-shown', true);
        
        $('#page-selection > ul').popover('show');  
        
        window.setTimeout(function () {
            $('#page-selection > ul').popover('destroy');
            }, 5600);
        });

});