<div
class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-zinc-900">Notifications</h3>
<p class="mt-0.5 text-xs text-zinc-500">
Choose how you want to hear from us.
</p>
</div>
<button
type="button"
class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-zinc-600 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 active:bg-zinc-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="hi-solid hi-bell-slash inline-block size-3.5 opacity-75"
>
<path
d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM20.57 16.476c-.223.082-.448.161-.674.238L7.319 4.137A6.75 6.75 0 0 1 18.75 9v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.207ZM5.25 9c0-.18.006-.36.018-.539l8.4 8.4a25.06 25.06 0 0 1-7.617-.43.75.75 0 0 1-.298-1.207A8.217 8.217 0 0 0 5.25 9.75V9ZM10.5 18.75c0-.034 0-.067.002-.1a25.05 25.05 0 0 0 2.996 0c.002.033.002.066.002.1a1.5 1.5 0 1 1-3 0Z"
/>
</svg>
<span>Pause all</span>
</button>
</div>
<div class="mt-6">
<p class="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
Delivery channels
</p>
<div class="mt-3 grid grid-cols-3 gap-2">
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="channel-email"
name="delivery-channel"
checked
/>
<span
class="relative flex grow cursor-pointer flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-zinc-500 group-hover:border-zinc-300 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 peer-focus:ring-3 peer-focus:ring-indigo-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-envelope inline-block size-5"
>
<path
d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z"
/>
<path
d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z"
/>
</svg>
<span class="text-xs font-semibold">Email</span>
</span>
</label>
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="channel-push"
name="delivery-channel"
/>
<span
class="relative flex grow cursor-pointer flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-zinc-500 group-hover:border-zinc-300 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 peer-focus:ring-3 peer-focus:ring-indigo-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-device-phone-mobile inline-block size-5"
>
<path
fill-rule="evenodd"
d="M8 16.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M4 4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4Zm4-1.5v.75c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75V2.5h1A1.5 1.5 0 0 1 14.5 4v12a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 16V4A1.5 1.5 0 0 1 7 2.5h1Z"
clip-rule="evenodd"
/>
</svg>
<span class="text-xs font-semibold">Push</span>
</span>
</label>
<label class="group relative flex">
<input
type="radio"
class="peer absolute top-0 left-0 appearance-none opacity-0"
id="channel-sms"
name="delivery-channel"
/>
<span
class="relative flex grow cursor-pointer flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-3 text-zinc-500 group-hover:border-zinc-300 peer-checked:border-indigo-400 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 peer-focus:ring-3 peer-focus:ring-indigo-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-chat-bubble-bottom-center-text inline-block size-5"
>
<path
fill-rule="evenodd"
d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
clip-rule="evenodd"
/>
</svg>
<span class="text-xs font-semibold">SMS</span>
</span>
</label>
</div>
</div>
<div class="mt-6">
<p class="text-xs font-semibold tracking-wide text-zinc-400 uppercase">
Activity
</p>
<ul class="divide-y divide-zinc-100">
<li>
<label
class="flex cursor-pointer items-start justify-between gap-4 py-3.5"
>
<div class="min-w-0">
<p class="text-sm font-semibold text-zinc-900">Mentions</p>
<p class="mt-0.5 text-xs text-zinc-500">
When someone tags you in a comment or thread.
</p>
</div>
<input
type="checkbox"
class="peer sr-only"
name="notify-mentions"
checked
/>
<span
class="relative h-6 w-10 flex-none rounded-full bg-zinc-300 transition-all duration-150 ease-out peer-checked:bg-indigo-500 peer-focus:ring-3 peer-focus:ring-indigo-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white peer-disabled:cursor-not-allowed peer-disabled:opacity-75 before:absolute before:top-1 before:left-1 before:size-4 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full"
></span>
</label>
</li>
<li>
<label
class="flex cursor-pointer items-start justify-between gap-4 py-3.5"
>
<div class="min-w-0">
<p class="text-sm font-semibold text-zinc-900">Comments</p>
<p class="mt-0.5 text-xs text-zinc-500">
New replies on documents you follow.
</p>
</div>
<input
type="checkbox"
class="peer sr-only"
name="notify-comments"
checked
/>
<span
class="relative h-6 w-10 flex-none rounded-full bg-zinc-300 transition-all duration-150 ease-out peer-checked:bg-indigo-500 peer-focus:ring-3 peer-focus:ring-indigo-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white peer-disabled:cursor-not-allowed peer-disabled:opacity-75 before:absolute before:top-1 before:left-1 before:size-4 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full"
></span>
</label>
</li>
<li>
<label
class="flex cursor-pointer items-start justify-between gap-4 py-3.5"
>
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-semibold text-zinc-900">Weekly digest</p>
<span
class="rounded-md bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-600 ring-1 ring-zinc-200/70 ring-inset"
>Mondays</span
>
</div>
<p class="mt-0.5 text-xs text-zinc-500">
A summary of activity from the past week.
</p>
</div>
<input type="checkbox" class="peer sr-only" name="notify-digest" />
<span
class="relative h-6 w-10 flex-none rounded-full bg-zinc-300 transition-all duration-150 ease-out peer-checked:bg-indigo-500 peer-focus:ring-3 peer-focus:ring-indigo-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white peer-disabled:cursor-not-allowed peer-disabled:opacity-75 before:absolute before:top-1 before:left-1 before:size-4 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full"
></span>
</label>
</li>
<li>
<label class="flex items-start justify-between gap-4 py-3.5">
<div class="min-w-0">
<div class="flex items-center gap-2">
<p class="text-sm font-semibold text-zinc-900">Security alerts</p>
<span
class="inline-flex items-center gap-1 rounded-md bg-rose-50 px-1.5 py-0.5 text-[10px] font-semibold text-rose-700 ring-1 ring-rose-200/70 ring-inset"
>
Required
</span>
</div>
<p class="mt-0.5 text-xs text-zinc-500">
Sign-in attempts and account changes.
</p>
</div>
<input
type="checkbox"
class="peer sr-only"
name="notify-security"
checked
disabled
/>
<span
class="relative h-6 w-10 flex-none rounded-full bg-zinc-300 transition-all duration-150 ease-out peer-checked:bg-indigo-500 peer-focus:ring-3 peer-focus:ring-indigo-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white peer-disabled:cursor-not-allowed peer-disabled:opacity-75 before:absolute before:top-1 before:left-1 before:size-4 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full"
></span>
</label>
</li>
<li>
<label
class="flex cursor-pointer items-start justify-between gap-4 py-3.5"
>
<div class="min-w-0">
<p class="text-sm font-semibold text-zinc-900">Product updates</p>
<p class="mt-0.5 text-xs text-zinc-500">
Release notes and new feature announcements.
</p>
</div>
<input type="checkbox" class="peer sr-only" name="notify-product" />
<span
class="relative h-6 w-10 flex-none rounded-full bg-zinc-300 transition-all duration-150 ease-out peer-checked:bg-indigo-500 peer-focus:ring-3 peer-focus:ring-indigo-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white peer-disabled:cursor-not-allowed peer-disabled:opacity-75 before:absolute before:top-1 before:left-1 before:size-4 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full"
></span>
</label>
</li>
</ul>
</div>
<div
class="mt-6 flex items-center justify-between border-t border-dashed border-zinc-200 pt-5"
>
<p class="text-[11px] text-zinc-500">Changes save automatically.</p>
<button
type="button"
class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-3 py-1.75 text-sm font-medium text-white hover:bg-zinc-700 active:bg-zinc-800"
>
<span>Done</span>
</button>
</div>
</div>