JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<body>
    <div class="form-group">
        <label class="control-label col-md-3">Crop Option:</label>
        <select id='crop' class="btn btn-default" data-toggle="dropdown">
            <option value="now">Now</option>
            <option value="livefeeds">Live Feeds</option>
        </select>
    </div>
    <ul class="imgly-controls-list imgly-controls-list-with-buttons" style="margin-right: 80px;">
        <li class="imgly-controls-item imgly-controls-item-square" title="Squared crop">Square</li>
        <li class="imgly-controls-item imgly-controls-item-9-16" title="9:16 crop">9:16</li>
        <li class="imgly-controls-item imgly-controls-item-16-9" title="16:9 crop">16:9</li>
    </ul>
</body>

CSS

li {
    list-style-type: none;
}

JavaScript

$('#crop').on('change', function () {
        if (this.value == 'now') {
            $(".imgly-controls-item-16-9, .imgly-controls-item-9-16, .imgly-controls-item-square").show();
        } else {
            $(".imgly-controls-item-square").show();
            $(".imgly-controls-item-16-9, .imgly-controls-item-9-16").hide();
        }
    });