JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Doesn't work</h1>
<div class="btn-group padded">
    <!-- Dropdown -->
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">	
        <span class="caret"></span>
    </button>	
    <ul class="dropdown-menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 0</a></li>
    </ul>
    <!-- /Dropdown -->
    <button class="btn btn-info" type="button">Option 2</button>
</div>
<span class="text-muted">Rounded corners on both sides of the .dropdown-toggle element</span>


<h1>Works</h1>
<div class="btn-group padded">
    <button class="btn btn-info" type="button">Option 2</button>
    <!-- Dropdown -->
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">	
        <span class="caret"></span>
    </button>	
    <ul class="dropdown-menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 0</a></li>
    </ul>
    <!-- /Dropdown -->
</div>

CSS

.padded{
    margin:10px;
}