Filter content : checkbox

<div class="px-7 pb-5.5 pt-2.5">

    <ul class="flex flex-col gap-3.75">

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_1" class="justify-between">

                    <span class="font-semibold">Option 1</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_1">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_2" class="justify-between">

                    <span class="font-semibold">Option 2</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_2">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_3" class="justify-between">

                    <span class="font-semibold">Option 3</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_3">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_4" class="justify-between">

                    <span class="font-semibold">Option 4</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_4">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_5" class="justify-between">

                    <span class="font-semibold">Option 5</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_5">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_6" class="justify-between">

                    <span class="font-semibold">Option 6</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_6">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_7" class="justify-between">

                    <span class="font-semibold">Option 7</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_7">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_8" class="justify-between">

                    <span class="font-semibold">Option 8</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_8">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_9" class="justify-between">

                    <span class="font-semibold">Option 9</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_9">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_10" class="justify-between">

                    <span class="font-semibold">Option 10</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_10">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="option_simple_11" class="justify-between">

                    <span class="font-semibold">Option 11</span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="option_simple_11">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

    </ul>

</div>

<button @click="open = false" class="flex items-center w-full py-3.75 px-7">

    <span class="flex items-center gap-3.75 group">

        <?= icon('chevron-left', 'w-2 text-primary-accent group-hover:text-secondary transition duration-300'); ?>

        <span class="font-semibold">Énergie</span>

    </span>

</button>

<div class="px-7 pb-5.5 pt-2.5">

    <ul class="flex flex-col gap-3.75">

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="transmission-manual" class="justify-between">

                    <span class="font-semibold">Manuelle <span class="font-normal">(290)</span></span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="transmission-manual">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="transmission-auto" class="justify-between">

                    <span class="font-semibold">Automatique <span class="font-normal">(160)</span></span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="transmission-auto">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

    </ul>

</div>

<button @click="open = false" class="flex items-center w-full py-3.75 px-7">

    <span class="flex items-center gap-3.75 group">

        <?= icon('chevron-left', 'w-2 text-primary-accent group-hover:text-secondary transition duration-300'); ?>

        <span class="font-semibold">Crit'air</span>

    </span>

</button>

<div class="px-7 pb-5.5 pt-2.5">

    <ul class="flex flex-col gap-3.75">

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_0" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-nickel-colored', 'w-6'); ?>

                        <span>Electrique & hydrogène <span class="font-normal">(25)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_0">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_1" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-1-colored', 'w-6'); ?>

                        <span>Critair 1 <span class="font-normal">(43)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_1">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_2" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-2-colored', 'w-6'); ?>

                        <span>Critair 2 <span class="font-normal">(79)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_2">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_3" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-3-colored', 'w-6'); ?>

                        <span>Critair 3 <span class="font-normal">(35)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_3">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_4" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-4-colored', 'w-6'); ?>

                        <span>Critair 4 <span class="font-normal">(17)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_4">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

        <li>

            <div class="form-element form-checkbox w-full">

                <label for="critair_5" class="justify-between">

                    <span class="font-semibold flex items-center gap-2.5">

                        <?= icon('critair-5-colored', 'w-6'); ?>

                        <span>Critair 5<span class="font-normal">(21)</span></span>

                    </span>

                    <input class="checkbox" type="checkbox" value="checkbox" id="critair_5">

                    <span class="controler"></span>

                </label>

            </div>

        </li>

    </ul>

</div>