mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
18 lines
No EOL
954 B
HTML
18 lines
No EOL
954 B
HTML
<!-- From Uiverse.io by Shubh0408 - Tags: checkbox, toggle, play, tailwind, tailwindcss -->
|
|
<label
|
|
class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center"
|
|
>
|
|
<input class="hidden peer" type="checkbox" />
|
|
<div
|
|
class="w-[50%] h-[2px] bg-white rounded-sm transition-all duration-300 origin-center rotate-90 -translate-x-[0.3rem] translate-y-[0.1rem] peer-checked:translate-y-[0.1rem]"
|
|
></div>
|
|
<div
|
|
class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.05rem] peer-checked:rotate-[-30deg] peer-checked:translate-y-[0.22rem] peer-checked:translate-x-[0.15rem]"
|
|
></div>
|
|
<div
|
|
class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.16rem] peer-checked:rotate-[30deg] peer-checked:translate-y-[-0.4rem] peer-checked:translate-x-[0.15rem]"
|
|
></div>
|
|
</label>
|
|
|
|
|
|
|