JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <legend>Select something</legend>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="all">Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="36"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="34"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="40"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="35"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="39"> Element </label>
        </li>
    </ul>
</fieldset>

            <fieldset>
    <legend>Select something</legend>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="all">Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="36"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="34"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="40"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="35"> Element </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="tax_query[]" value="39"> Element </label>
        </li>
    </ul>
</fieldset>

CSS

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: inline-block;
  position: relative; }
  fieldset > legend {
    font-family: 'Exo', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6rem;
    color: #262626;
    display: block;
    cursor: pointer;
    text-align: center;
    border: 3px #d8d8d8 solid;
    padding: 2rem;
    margin: 0 2rem 0 -2rem; }
    fieldset > legend:after {
      content: "\e806";
      font-family: 'fontello';
      color: #c04233;
      margin-left: 0.5em; }
    fieldset > legend.active {
      border-bottom: 1px #d8d8d8 solid; }
  fieldset label {
    font-family: 'Exo', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
    color: #262626; }
  fieldset ul {
    position: absolute;
    left: -9999px; }
  fieldset .visible {
    left: 0;
    right: 0;
    background: white;
    z-index: 420;
    border: 3px solid #d8d8d8;
    border-top: 0;
    padding: 1rem; }

JavaScript

(function($) {

    $(document).ready(function() {

        $('fieldset legend').on('click', function() {
            var $this = $(this);
            $this.toggleClass('active');
            $this.next().toggleClass('visible');
        })


        $(document).on('click', function (e) {
            if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
                $('ul').removeClass('visible');
                $('legend').removeClass('active');
            }
        });



    })

})(jQuery);