Skip to content

Instantly share code, notes, and snippets.

@carellen

carellen/gist:06f48c086f91cff30888bd4cea16e77f

Created February 7, 2022 19:10
Show Gist options
  • Save carellen/06f48c086f91cff30888bd4cea16e77f to your computer and use it in GitHub Desktop.
Save carellen/06f48c086f91cff30888bd4cea16e77f to your computer and use it in GitHub Desktop.
Download ZIP
custom switch with tailwindcss
Raw
gistfile1.txt
<div class="grid grid-cols-4 grid-rows-1">
<input id="check" type="checkbox" class="peer col-start-2 row-start-1 cursor-pointer transition-all duration-300 checked:translate-x-20 after:w-5 after:h-5 after:rounded-full after:bg-gradient-to-t after:from-gray-200 after:to-slate-300 after:shadow-inner flex justify-center items-center m-3 z-10 appearance-none w-10 h-10 bg-gradient-to-b from-gray-200 to-slate-300 rounded-full"/>
<label for="check" class="shadow-md col-span-2 col-start-2 row-start-1 flex justify-center items-center after:w-24 after:h-4 after:rounded-full after:shadow-inner after:bg-red-500 after:peer-checked:bg-green-500 h-16 w-36 bg-gradient-to-b from-slate-300 to-slate-100 rounded-full">
</label>
<span class="justify-self-end self-center pr-2 font-semibold peer-checked:text-gray-400 text-red-500">OFF</span>
<span class="justify-self-start self-center pl-2 font-semibold text-gray-400 peer-checked:text-green-500">ON</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment