Last active
March 2, 2021 08:53
-
-
Save alaminfirdows/ede749526ffeaf5b937cbffe2b10ff5a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div x-data="{ isChecked: false }" class="w-full"> | |
| <label for="myCheckbox" class="mt-3 inline-flex items-center cursor-pointer"> | |
| <span class="relative"> | |
| <span class="block w-10 h-6 bg-white rounded-full border border-gray-300"></span> | |
| <span class="absolute block w-4 h-4 mt-1 ml-1 bg-gray-400 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out outline-none" :class="{'bg-purple-600 transform translate-x-full':isChecked}"> | |
| <input @click="isChecked = !isChecked" id="myCheckbox" type="checkbox" class="absolute opacity-0 w-0 h-0"> | |
| </span> | |
| </span> | |
| <span class="ml-3 text-sm" x-html="isChecked"></span> | |
| </label> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview: https://codepen.io/alaminfirdows/pen/xxRjpoP