
<li class="group flex-col items-center justify-between
        p-5 text-gray-800 bg-white border-[1px] border-gray-200
        rounded-lg cursor-pointer
        hover:text-gray-600
        hover:bg-gray-50 ">
    <input type="checkbox" class="!hidden peer --name-- checked  " name="--name--" id="--name--"  value="1">
    <label for="--name--" class="text-lg font-gray-800 w-full cursor-pointer">
        --question--
        <span class="float-right text-sm font-normal text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
            </svg>
        </span>
    </label>
    <div class=" group-has-[:checked]:grid pl-8 w-full hidden grid-cols-1">
        <div class="py-4 w-full text-sm">--answer--</div>
    </div>
</li>