JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="ContactsCtrl">
        <div class="option">
            <div class="name">
                <b>Welcome Email: </b>
            </div>
            
            <div class="btn btn-xs btn-transparent" style="padding-left:0;padding-right:0;cursor:default;" data-toggle="welcome-email">
                <i class="fa fa-question-circle"></i>
            </div>
            
            <div class="wrapper">
                <input type="checkbox" name="toggle" ng-model="welcomeEmail.welcome_email_on" id="toggle">
                <label for="toggle" ng-click="toggleWelcomeEmail()"></label>
            </div>
        </div>
    </div>
</div>

CSS

.option {
  height: 26px;
  margin-bottom: 5px;
}
.option .name {
  display: inline-block;
  float: left;
  height: 25px;
  margin-right: 10px;
  margin-left: 10px;
  line-height: 25px;
  text-align: left;
}
.option .wrapper {
  position: absolute;
  top: 44px;
  left: 330px;
}
.option .wrapper input#toggle {
  max-height: 0;
  max-width: 0;
  opacity: 0;
}
.option .wrapper input#toggle + label {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 50px;
  border-radius: 15px;
  cursor: pointer;
}
.option .wrapper input#toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.option .wrapper input#toggle + label:after {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.option .wrapper input#toggle:checked + label:before {
  width: 50px;
  background: #13bf11;
}
.option .wrapper input#toggle:checked + label:after {
  left: 20px;
  box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
}

JavaScript

var app = angular.module('myApp', []);

app.controller('ContactsCtrl', ['$scope', function($scope) {
    $scope.welcomeEmail = {
        welcome_email_on: true
    };

    $scope.$watch('welcomeEmail.welcome_email_on', function() {
        console.log('State Changed. Welcome Email: ' + $scope.welcomeEmail.welcome_email_on);
    });

    $scope.toggleWelcomeEmail = function(confirmOff) {
        // Do something
    };
}]);

app.run();