<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="container mx-auto my-12 p-12 flex items-center justify-center">
<div class="relative inline-block mr-2 w-10 align-middle select-none transition duration-200 ease-in">
<input type="checkout" class="toggle-checkbox absolute block w-6 h-6 border-4 rounded-full appearance-none cursor-pointer">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cusrsor-pointer"></label>
</div>
</div>
.toggle-checkbox:checked {
@apply:right-0 border-green-400;
right:0;
border-color:#68d391;
}
.toggle-checkbox:checked + .toggle-label {
@apply:bg-green-400;
background-color:#68d391;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.