<div
class="relative mx-auto w-full max-w-lg rounded-xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
<div class="space-y-4 rounded-lg bg-white p-4">
<div class="text-lg font-bold">Dark Mode Preference</div>
<div class="grid grid-cols-1 gap-3">
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="radio_group1_a"
name="radio_group1"
checked
/>
<span
class="absolute top-0 right-0 bottom-0 z-10 flex items-center px-4 text-indigo-600 opacity-0 peer-checked:opacity-100"
>
<svg
class="hi-mini hi-computer-desktop inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v8.5A2.25 2.25 0 0115.75 15h-3.105a3.501 3.501 0 001.1 1.677A.75.75 0 0113.26 18H6.74a.75.75 0 01-.484-1.323A3.501 3.501 0 007.355 15H4.25A2.25 2.25 0 012 12.75v-8.5zm1.5 0a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H4.25a.75.75 0 01-.75-.75v-7.5z"
clip-rule="evenodd"
/>
</svg>
</span>
<span
class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-indigo-500 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-focus:ring-4 peer-focus:ring-indigo-50"
>
<span class="grow pr-8 text-sm">
<span class="mb-1 block font-semibold">System</span>
<span class="text-slate-600"
>It will auto update based on your OS preference</span
>
</span>
</span>
</label>
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="radio_group1_b"
name="radio_group1"
/>
<span
class="absolute top-0 right-0 bottom-0 z-10 flex items-center px-4 text-indigo-600 opacity-0 peer-checked:opacity-100"
>
<svg
class="hi-mini hi-sun inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
/>
</svg>
</span>
<span
class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-indigo-500 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-focus:ring-4 peer-focus:ring-indigo-50"
>
<span class="grow pr-8 text-sm">
<span class="mb-1 block font-semibold">Light</span>
<span class="text-slate-600"
>I prefer the elegance of light mode</span
>
</span>
</span>
</label>
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="radio_group1_c"
name="radio_group1"
/>
<span
class="absolute top-0 right-0 bottom-0 z-10 flex items-center px-4 text-indigo-600 opacity-0 peer-checked:opacity-100"
>
<svg
class="hi-mini hi-moon inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
clip-rule="evenodd"
/>
</svg>
</span>
<span
class="relative flex grow rounded-lg border border-slate-200 p-4 group-hover:border-indigo-500 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-focus:ring-4 peer-focus:ring-indigo-50"
>
<span class="grow pr-8 text-sm">
<span class="mb-1 block font-semibold">Dark</span>
<span class="text-slate-600"
>You are an indie hacker, so always dark mode on</span
>
</span>
</span>
</label>
</div>
</div>
</div>