JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="getbootstrap.com/dist/js/bootstrap.js"></script>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Select category ...">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right full-width">
                <li><a href="#">yellow</a>

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

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

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>

JavaScript

$(".dropdown-menu li a").click(function () {
    alert("hi");
    var selText = $(this).text();
    $('label').css('color', selText);
});

$(".btn-default").click(function () {
    var widthB = $( ".input-group" ).width();
    $('.dropdown-menu').css('width', widthB);
});