Back to marketing components
Polls
Interactive poll and survey components built with Tailwind CSS. Use these blocks to gather feedback, run surveys, or engage users on marketing websites and web applications.
3/3 Dark Mode Updated: Jul 4, 2026
<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">
Where should we go for lunch?
</h2>
<p class="mt-4 text-pretty text-gray-700">
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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" style="width: 45%"></div>
<div class="relative flex items-center gap-4">
<input
type="radio"
id="Option1"
name="Poll1"
class="size-5 border-gray-300 shadow-sm"
/>
<span class="font-medium text-gray-900"> Option 1 </span>
</div>
</label>
<span class="text-gray-700">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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" style="width: 25%"></div>
<div class="relative flex items-center gap-4">
<input
type="radio"
id="Option2"
name="Poll1"
class="size-5 border-gray-300 shadow-sm"
/>
<span class="font-medium text-gray-900"> Option 2 </span>
</div>
</label>
<span class="text-gray-700">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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" style="width: 30%"></div>
<div class="relative flex items-center gap-4">
<input
type="radio"
id="Option3"
name="Poll1"
class="size-5 border-gray-300 shadow-sm"
/>
<span class="font-medium text-gray-900"> Option 3 </span>
</div>
</label>
<span class="text-gray-700">30%</span>
</div>
</fieldset>
</form>
<p class="mt-4 text-sm text-gray-700">
Ends on <time datetime="2025-10-31">October 31, 2025</time>
</p>
</div>Plugins: @tailwindcss/forms
<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 dark:bg-gray-900 dark:text-white"
>
<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="radio"
id="Option1"
name="Poll1"
class="size-5 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 dark:bg-gray-900 dark:text-white"
>
<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="radio"
id="Option2"
name="Poll1"
class="size-5 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 dark:bg-gray-900 dark:text-white"
>
<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="radio"
id="Option3"
name="Poll1"
class="size-5 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>Plugins: @tailwindcss/forms
<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">
Where should we go for lunch?
</h2>
<p class="mt-4 text-pretty text-gray-700">
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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" 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"
/>
<span class="font-medium text-gray-900"> Option 1 </span>
</div>
</label>
<span class="text-gray-700">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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" 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"
/>
<span class="font-medium text-gray-900"> Option 2 </span>
</div>
</label>
<span class="text-gray-700">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"
>
<div class="absolute inset-y-0 left-0 rounded bg-gray-100" 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"
/>
<span class="font-medium text-gray-900"> Option 3 </span>
</div>
</label>
<span class="text-gray-700">30%</span>
</div>
</fieldset>
</form>
<p class="mt-4 text-sm text-gray-700">
Ends on <time datetime="2025-10-31">October 31, 2025</time>
</p>
</div>Plugins: @tailwindcss/forms
<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>Plugins: @tailwindcss/forms
<!--
This is a pure HTML implementation.
Highlighting all previous stars when selecting a rating is not possible without additional JavaScript.
-->
<form action="#">
<fieldset>
<legend class="sr-only">Leave a rating</legend>
<div class="flex flex-row-reverse items-center justify-end gap-1">
<label
for="Rating5"
class="text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="5" id="Rating5" class="peer sr-only" />
<span class="sr-only">5 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating4"
class="text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="4" id="Rating4" class="peer sr-only" />
<span class="sr-only">4 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating3"
class="text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="3" id="Rating3" class="peer sr-only" />
<span class="sr-only">3 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating2"
class="text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="2" id="Rating2" class="peer sr-only" />
<span class="sr-only">2 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating1"
class="text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="1" id="Rating1" class="peer sr-only" />
<span class="sr-only">1 Star</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
</div>
</fieldset>
</form><!--
This is a pure HTML implementation.
Highlighting all previous stars when selecting a rating is not possible without additional JavaScript.
-->
<form action="#">
<fieldset>
<legend class="sr-only">Leave a rating</legend>
<div class="flex flex-row-reverse items-center justify-end gap-1">
<label
for="Rating5"
class="text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="5" id="Rating5" class="peer sr-only" />
<span class="sr-only">5 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating4"
class="text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="4" id="Rating4" class="peer sr-only" />
<span class="sr-only">4 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating3"
class="text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="3" id="Rating3" class="peer sr-only" />
<span class="sr-only">3 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating2"
class="text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="2" id="Rating2" class="peer sr-only" />
<span class="sr-only">2 Stars</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
<label
for="Rating1"
class="text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500"
>
<input type="radio" name="Rating1" value="1" id="Rating1" class="peer sr-only" />
<span class="sr-only">1 Star</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="block size-6 peer-checked:hidden"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hidden size-6 text-yellow-500 peer-checked:block"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
</label>
</div>
</fieldset>
</form>