JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table id="tblPermissionsUsersGlobal" class="table table-sm col-xs-12">
	<tbody>
		<tr style="display: table-row">
			<td>
				<label>Checkbox</label>
			</td>
			<td>
				<label class="custom-control custom-checkbox">
					<input type="checkbox" id="Global_checkbox0" class="custom-control-input checkGlobal">
					<span class="custom-control-indicator pull-right"></span>
					<span class="custom-control-label pull-right"></span>
				</label>
			</td>
		</tr>
    
    <tr style="display: table-row">
			<td>
				<label>Checkbox right</label>
			</td>
			<td>
				<label class="custom-control custom-checkbox">
					<input type="checkbox" id="Global_checkbox1" class="custom-control-input right checkGlobal">
					<span class="custom-control-indicator right"></span>
					<span class="custom-control-label right"></span>
				</label>
			</td>
		</tr>
    
		<tr style="display: table-row">
			<td>
				<label>Checkbox pull-right</label>
			</td>
			<td>
				<label class="custom-control custom-checkbox">
					<input type="checkbox" id="Global_checkbox2" class="custom-control-input pull-right checkGlobal">
					<span class="custom-control-indicator pull-right"></span>
					<span class="custom-control-label pull-right"></span>
				</label>
			</td>
		</tr>
	</tbody>
</table>

CSS

.custom-control {
			padding: 0 !important;
			margin: 0 !important;
			width: 0px !important;
		}

.custom-control-label::before {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control-label::after {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control .custom-checkbox {
  padding-right: 0;
  margin-right: 0;
}




.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 0;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #EEB111;
  background-color: #EEB111;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(238, 177, 17, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #eeb32b;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #e8e4cd;
  border-color: #e8e4cd;
}

.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0;
}

.custom-checkbox...