JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown_box"><span>Colors</span>
</div>
<div class="dropdown_container">
    <ul id="select_colors">
        <li>
            <label>
                <input type="checkbox" name="color[]" value="Black" />Black</label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="color[]" value="Blue" />Blue</label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="color[]" value="Lime_Green" />Lime Green</label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="color[]" value="Light_Gray" />Light Gray</label>
        </li>
        <!-- More List Items --!>
    </ul>
</div>

CSS

.dropdown_box
{
    background-color:#000000;
    float:left;
    color:#fff;
}

JavaScript

$(function () {
    $(".dropdown_container input").change(function () {
        var checked = $(".dropdown_container input:checked");
        var span = $(".dropdown_box span");
        if (checked.length > 3) {
            span.html("" + checked.length + " selected");
        } else {
            span.html(checked.map(function () {
                return $(this).val().replace("_"," ");
            }).get().join(", "));
        }
    });
});