JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<h1>Bootstrap 3.0.2 styling of .h1, .h2, etc. elements</h1>

<legend>Ex. 1) .h1, .h2, etc. classes override normal (proper) styling</legend>
<p>
    <a href="#">Normal anchor tag styling</a>
    <br>
    <a href="#" class="h3">Proper h3 sizing, but incorrect color</a>
</p>
    
<br><br>
<legend>Ex. 2) This also goes for .text-success, etc.</legend>
<p>
    <span class="text-success">Proper color</span>
    <br>
    <span class="h2 text-success">Proper h2 sizing, but incorrect color</span>
</p>

<br><br>
<p>...this issue also causes the same problems for things like the color styling of glyphicons...