JSFiddle - React, Tailwind, and code Playground

by Mr sogata

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
	<br>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home <span class="badge">0</span></a></li>
        <li><a data-toggle="tab" href="#tab1">Tab 1 <span class="badge">2</span></a></li>
        <li><a data-toggle="tab" href="#tab2">Tab 2 <span class="badge">1</span></a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Assalamualaikum Warahmatullahi Wabarakatuhu</p>
        </div>
        <div id="tab1" class="tab-pane fade">
            <h3>Tab1 Content</h3>
            <p>Don't Forget</p>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>Tab2 Content</h3>
            <p>to vote utopian-io as witnes</p>
        </div>
    </div>
</div>

CSS

.container .nav.nav-tabs li a .badge {
	position: absolute;
    top: -10px;
    right: -10px;
    background: #39F;