Marketing Polls Multiple choice survey Dark

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="max-w-prose">
        <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white">
          Where should we go for lunch?
        </h2>

        <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe maiores exercitationem id
          soluta eaque harum eligendi distinctio sapiente esse ad! Sit expedita eos quam numquam ea,
          assumenda officiis minus ut!
        </p>
      </div>

      <form action="#" class="mt-6 space-y-4">
        <fieldset class="space-y-4">
          <legend class="sr-only">Select an option</legend>

          <div class="flex items-center gap-4">
            <label
              for="Option1"
              class="relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600"
            >
              <div
                class="absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800"
                style="width: 45%"
              ></div>

              <div class="relative flex items-center gap-4">
                <input
                  type="checkbox"
                  id="Option1"
                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600"
                />

                <span class="font-medium text-gray-900 dark:text-white"> Option 1 </span>
              </div>
            </label>

            <span class="text-gray-700 dark:text-gray-200">45%</span>
          </div>

          <div class="flex items-center gap-4">
            <label
              for="Option2"
              class="relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600"
            >
              <div
                class="absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800"
                style="width: 25%"
              ></div>

              <div class="relative flex items-center gap-4">
                <input
                  type="checkbox"
                  id="Option2"
                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600"
                />

                <span class="font-medium text-gray-900 dark:text-white"> Option 2 </span>
              </div>
            </label>

            <span class="text-gray-700 dark:text-gray-200">25%</span>
          </div>

          <div class="flex items-center gap-4">
            <label
              for="Option3"
              class="relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600"
            >
              <div
                class="absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800"
                style="width: 30%"
              ></div>

              <div class="relative flex items-center gap-4">
                <input
                  type="checkbox"
                  id="Option3"
                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600"
                />

                <span class="font-medium text-gray-900 dark:text-white"> Option 3 </span>
              </div>
            </label>

            <span class="text-gray-700 dark:text-gray-200">30%</span>
          </div>
        </fieldset>
      </form>

      <p class="mt-4 text-sm text-gray-700 dark:text-gray-200">
        Ends on <time datetime="2025-10-31">October 31, 2025</time>
      </p>
    </div>