JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrlr">
        <div ng-show="show">I'm using ngShow!!!</div>
        <div ng-hide="show">I'm using ngHide!!!</div>
        <div>Value of "show": <strong>{{show}}</strong></div>
        <div ng-class="togel" ng-click="toggle()"><span></span></div>
    </div>
</div>

CSS

.toggle-button { margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button span { position: absolute; left: 0; top: 0; border-radius: 100%; width: 26px; height: 26px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: red; border: 2px solid #7DA652; }
.toggle-button-selected span { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }

JavaScript

angular.module('myApp',[])
.controller('myCtrlr',['$scope',function($scope){
    $scope.show = true;
    $scope.togel = "toggle-button";
    $scope.toggle = function(){
        $scope.show = !$scope.show;
        $scope.togel = "toggle-button-selected";
    };
}]);