JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<div id="route-selector-box">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="routeSelect" title="e.g: Express, Rail, Rapid, Duval..." aria-expanded="false">Button</button>
<div class="dropdown bootstrap-select form-control route show-tick">
<select>
<option>Route1</option>
<option>Route2</option>
<option>Route3</option>
<option>Route4</option>
</select>
</div>
</div>
<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target="#route-selector-box">testing</a>
<hr/>
<div class="btn-group">
    <a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Test <span class="caret"></span>
    </a>
    
    <ul id="test-dropdown" class="dropdown-menu">
        <li><a href="#">test</a></li>
    </ul>
    
</div>
<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target=".btn-group">testing</a>

<div>
<input type="checkbox" checked data-toggle="toggle" data-style="slow">
<input type="checkbox" checked data-toggle="toggle" data-class="fast">
<input type="checkbox" checked data-toggle="toggle" data-style="quick">
</div>

CSS

.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
  .fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
  .quick .toggle-group { transition: none; -webkit-transition: none; }