JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cContainer">
	<div class="cDropdown">
		<div class="downArrow"></div>
		<h4>Night Life</h4>
	</div>
	<div class="multiCheckboxes stick">
        <input id="1" class="stick" type="checkbox" value="1" name="l-28">
        <label class="stick" for="1">Dive Bar</label>
        <br>
        <input id="2" class="stick" type="checkbox" value="2" name="l-28">
        <label class="stick" for="2">Pub</label>
        <br>
        <input id="3" class="stick" type="checkbox" value="3" name="l-28">
        <label class="stick" for="3">Dance Club</label>
        <br>
        <input id="4" class="stick" type="checkbox" value="4" name="l-28">
        <label class="stick" for="4">Pool Hall</label>
        <br>
        <input id="5" class="stick" type="checkbox" value="5" name="l-28">
        <label class="stick" for="5">Karaoke</label>
        <br>
        <input id="6" class="stick" type="checkbox" value="6" name="l-28">
        <label class="stick" for="6">Sports Bar</label>
        <br>
        <input id="7" class="stick" type="checkbox" value="7" name="l-28">
        <label class="stick" for="7">Trendy</label>
        <br>                    
	</div>
</div><br/>

CSS

.cDropdown {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px inset #D3D3D3;
    clear: right;
    padding: 4px 3px;
    width: 150px;
}
.cDropdown h4 {
    font-size: 0.86em;
    font-weight: normal;
    margin: 0 0 0 1px;
    padding: 0;
}
.downArrow {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid #3C3C3C;
    float: right;
    height: 0;
    margin: 3px 0 0 3px;
    width: 0;
}
.multiCheckboxes {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #3C3C3C;
    display: none;
    left: 9px;
    max-height: 200px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    top: 35px;
    width: 146px;
    z-index: 999;
}

.multiCheckboxes label {
    float: none !important;
    font-size: 0.9em;
    width: 7.6em !important;
}

JavaScript

$('.cDropdown').on('click', function (e) {
	$('.multiCheckboxes').slideUp(50)
	e.stopPropagation();
	currentDrop = $(this).next();
	currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
	var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
    if (nightLifeLimit == 2) {
        $('input:checkbox[name="l-28"]').each(function () {
            if ($(this).is(':checked')) {
                return;
            }
            else {
                $(this).prop('disabled', true);
            }
        });
	}
	else {
		$('input:checkbox[name="l-28"]').each(function () {
		    $(this).prop('disabled', false);
		});
	}
});