JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demo" ng-controller="demoCtrl">
    
    <div>
        <input type="checkbox" id="chk1" ng-model="mySwitcher" ui-switch="{size: 'small'}" />
        <label for="chk1">My switch</label>
    </div>
    
    <p>Current switcher value: <strong>{{mySwitcher}}</strong></p>
    
    <button type="button" ng-click="changeSwitchValue($event, false)">Change to false</button>
    <button type="button" ng-click="changeSwitchValue($event, true)">Change to true</button>
    
</div>

CSS

/*
     *
     * Main stylesheet for Switchery.
     * http://abpetkov.github.io/switchery/
     *
     */

    /* Switchery defaults. */

    .switchery {
      background-color: #fff;
      border: 1px solid #dfdfdf;
      border-radius: 20px;
      cursor: pointer;
      display: inline-block;
      height: 30px;
      position: relative;
      vertical-align: middle;
      width: 50px;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      box-sizing: content-box;
      background-clip: content-box;
    }
    .switchery > small {
      background: #fff;
      border-radius: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      height: 30px;
      position: absolute;
      top: 0;
      width: 30px;
    }
    /* Switchery sizes. */

    .switchery-small {
      border-radius: 20px;
      height: 20px;
      width: 33px;
    }
    .switchery-small > small {
      height: 20px;
      width: 20px;
    }
    .switchery-large {
      border-radius: 40px;
      height: 40px;
      width: 66px;
    }
    .switchery-large > small {
      height: 40px;
      width: 40px;
    }

JavaScript

(function() {
    
    'use strict';
    
    angular
        .module('demo', [])
        .controller('demoCtrl', demoCtrl);
    
    
    demoCtrl.$inject = ['$scope'];
    
    
    /* @ngInject */
    function demoCtrl($scope) {
        
        $scope.mySwitcher = true;
        
        $scope.changeSwitchValue = function($event, value) {
            
            $event.preventDefault();
            
            // Change the switcher value
            $scope.mySwitcher = value;
            
        };
        
    }
    
    
    /**
      * Modified ui-switch directive
      *
      *
      */
      angular
          .module('demo')
          .directive('uiSwitch', uiSwitch);
        
        
    uiSwitch.$inject = ['$window', '$timeout', '$parse'];
    
    
    /* @ngInject */
    function uiSwitch($window, $timeout, $parse) {
        
        var directive = {
            
            require: 'ngModel',
            restrict: 'AE',
            scope: {
                initValue: '=ngModel'
            },
            link: postLink
            
        };
        
        return directive;
        
        
        
        ///////////////////////////////////////////////////////////////////////////////
        
        
        
        function postLink($scope, $element, $attrs, ngModel) {
            
            if (!ngModel) return false;
            
            var options = {};
            
            try {
                
                options = $parse($attrs.uiSwitch)($scope);
                
            } catch (e) {}
            
            var switcher;
            var previousDisabledValue;
            
            // Watch for attribute changes to recreate the switch if the 'disabled' attribute changes
            $attrs.$observe('disabled', function(value) {
                
                if (value === undefined || value == previousDisabledValue) {
                    
                    return;
                    
              ...