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>
<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">Messages <span class="badge">4</span>
</button>

<h1>
    Messages <span class="badge">4</span>
</h1>

<h1>
    Messages <span class="badge badge-middle">4</span>
</h1>

CSS

.badge-middle {
    vertical-align: middle;
}