JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <div class="form-group form-group-sm">
        <label class="control-label col-sm-2">Entities</label>
        <div class="multi-select-widget">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <ul class="list-group">
                        <li class="list-group-item"><span>Date</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-2 control-button">
                <button type="button" class="btn btn-default" data-original-title="" title="">Change...</button>
            </div>
        </div>
    </div>
</div>

CSS

.multi-select-widget .panel-heading {
	padding: 5px 10px;
	font-weight: 700;
}

.multi-select-widget .list-group-item {
	padding: 5px 10px;
}

JavaScript

$('.selectall').click(function () {
    if ($(this).is(':checked')) {
        $('td input').attr('checked', true);
    } else {
        $('td input').attr('checked', false);
    }
});

$('[rel="popover"]').popover({
    container: $('#2'),

    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
}).click(function (e) {
    e.preventDefault();
});