JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select_roles active">
<div class="show_als">

<input name="expertise_check_show_all"  checked="checked"  id="expertise_check_show_all" type="checkbox" value="" class="check" />
<label for="expertise_check_show_all">Any role</label>
</div>
                                                    <div class="list">

                                   <input  id="expertise_check_7" name="expertise_check[]" type="checkbox" value="7"  class="check" />
                                   <label for="expertise_check_7">Advisor</label>
                                </div>
                                                   <div class="list">
                                   <input  id="expertise_check_1" name="expertise_check[]" type="checkbox" value="1"  class="check" />
                                   <label for="expertise_check_1">Business Developer</label>
                                </div>
                                                   <div class="list">

                                   <input  id="expertise_check_6" name="expertise_check[]" type="checkbox" value="6"  class="check" />
                                   <label for="expertise_check_6">Designer</label>
                                </div>
                                                   <div class="list">
                                   <input  id="expertise_check_3" name="expertise_check[]" type="checkbox" value="3"  class="check" />
                                   <label for="expertise_check_3">Engineer</label>
                                </div>
                                                   <div class="list">

                                   <input  id="expertise_check_5" name="expertise_check[]" type="checkbox" value="5"  class="check" />
                                   <label for="expertise_check_5">Marketer</label>
                                </div>
                                                   <div class="list">
                            ...

CSS

body {float:left; width:100%; height:100%; padding:100px;}
            .select_roles {display:none;}
            .active {display:block;}

JavaScript

$('.select_roles').click(function (){
                 if($(this).hasClass('active')){
                 }
                 });

            $('body').click(function (){
                 if($('.select_roles').hasClass('active')){
                     $('.select_roles').removeClass('active');
                 }
            });