You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.5 KiB
HTML
32 lines
1.5 KiB
HTML
<div class="bg-white shadow-sm sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold text-gray-900">
|
|
Renew subscription automatically
|
|
</h3>
|
|
<div class="mt-2 sm:flex sm:items-start sm:justify-between">
|
|
<div class="max-w-xl text-sm text-gray-500">
|
|
<p id="renew-subscription-description">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
|
|
totam non cumque deserunt officiis ex maiores nostrum.
|
|
</p>
|
|
</div>
|
|
<div class="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:shrink-0 sm:items-center">
|
|
<div
|
|
class="group relative inline-flex w-11 shrink-0 rounded-full bg-gray-200 p-0.5 inset-ring inset-ring-gray-900/5 outline-offset-2 outline-indigo-600 transition-colors duration-200 ease-in-out has-checked:bg-indigo-600 has-focus-visible:outline-2 dark:bg-white/5 dark:inset-ring-white/10 dark:outline-indigo-500 dark:has-checked:bg-indigo-500"
|
|
>
|
|
<span
|
|
class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-5"
|
|
></span>
|
|
<input
|
|
type="checkbox"
|
|
name="renew-subscription"
|
|
aria-label="Renew subscription automatically"
|
|
aria-describedby="renew-subscription-description"
|
|
class="absolute inset-0 appearance-none focus:outline-hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|