mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
77 lines
No EOL
2 KiB
HTML
77 lines
No EOL
2 KiB
HTML
<!-- From Uiverse.io by Manish-Tamang - Tags: checkbox, tailwind, tailwindcss -->
|
||
<fieldset>
|
||
<legend class="sr-only">Checkboxes</legend>
|
||
|
||
<div class="space-y-2">
|
||
<label
|
||
class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
|
||
for="Option1"
|
||
>
|
||
<div class="flex items-center">
|
||
|
||
<input
|
||
id="Option1"
|
||
class="size-4 rounded border-gray-300"
|
||
type="checkbox"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<strong class="font-medium text-gray-900"> Manish Tamang</strong>
|
||
|
||
<p class="mt-1 text-pretty text-sm text-gray-700">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||
</p>
|
||
</div>
|
||
</label>
|
||
|
||
<label
|
||
class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
|
||
for="Option2"
|
||
>
|
||
<div class="flex items-center">
|
||
|
||
<input
|
||
id="Option2"
|
||
class="size-4 rounded border-gray-300"
|
||
type="checkbox"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<strong class="font-medium text-gray-900"> Sajak Dhital </strong>
|
||
|
||
<p class="mt-1 text-pretty text-sm text-gray-700">
|
||
Lorem ipsum dolor sit amet consectetur.
|
||
</p>
|
||
</div>
|
||
</label>
|
||
|
||
<label
|
||
class="flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 has-[:checked]:bg-blue-50"
|
||
for="Option3"
|
||
>
|
||
<div class="flex items-center">
|
||
|
||
<input
|
||
id="Option3"
|
||
class="size-4 rounded border-gray-300"
|
||
type="checkbox"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<strong class="text-pretty font-medium text-gray-900">
|
||
Nishan Basnet</strong
|
||
>
|
||
|
||
<p class="mt-1 text-pretty text-sm text-gray-700">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||
</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
|
||
|