JSFiddle - React, Tailwind, and code Playground

by Shridhar Baddur

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div class="col-md-8 col-xs-12">
    	<h1>CuB</h1>

    <form class="col-xs-8 form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-2 control-label">Latitude</label>
            <label class="col-xs-8 control-label">xxx.xxxxx</label>
            <label class="control-label col-sm-2">degrees</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Display Units</label>
            <div class="col-sm-10">
                <div class="btn-group pull-right">
                    <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">Dropdown <span class="caret"></span>

                    </button>
                    <ul role="menu" class="dropdown-menu">
                        <li>	<a href="#">Facebook</a>

                        </li>
                        <li>	<a href="#">Twitter</a>

                        </li>
                        <li>	<a href="#">Google+</a>

                        </li>
                        <li>	<a href="#">LinkedIn</a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="form-group pager">
            <div class="col-sm-3 col-xs-12">
                <button type="button" class="btn btn-success col-xs-12">Use</button>
            </div>
        </div>
        <div class="col-sm-3 col-xs-12">
            <button type="button" class="btn btn-warning col-xs-12">Back</button>
        </div>
    </form>
</div>