JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="dropdown" id="type-event-filter" role="group" aria-labelledby="quoi">
        <button id="quoi" type="button" class="dropdown__title" aria-expanded="false" aria-controls="type-dropdown">
            Quoi ?            <span class="iconContainer">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" aria-hidden="true" focusable="false"><path d="M11.025 0 12 .978 6 7 0 .978.975 0 6 5.043 11.025 0Z"></path></svg>
            </span>
        </button>
        <ul class="dropdown__menu" id="type-dropdown">
                            <li>
                    <input name="type[]" type="checkbox" id="input-15" value="15">
                    <label for="input-15">Ateliers - Animations - Stages</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-13" value="13">
                    <label for="input-13">Expositions</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-17" value="17">
                    <label for="input-17">Grands événements</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-3" value="3">
                    <label for="input-3">Non classé</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-11" value="11">
                    <label for="input-11">Projections</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-14" value="14">
                    <label for="input-14">Rencontres - Conférences</label>
                </li>
                            <li>
                    <input name="type[]" type="checkbox" id="input-16" value="16">
                    <label for="input-16">Spectacles</label>
                </li>
                     ...