JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="col-xs-8 col-xs-offset-2">
    <form role="form">
        <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                    <li class="input"><a href="#">black</a></li>
                    <li class="input"><a href="#">white</a></li>
                    <li class="input"><a href="#">red</a></li>
                    <li class="input"><a href="#">blue</a></li>
                    <li class="input"><a href="#">yellow</a></li>
                </ul>
            </div>
        </div>
    </form>
</div>