JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card rounded-0 border-0 shadow mb-4">
  <div class="card-body p-4 text-center">
    <!-- Custom switch -->
    <p class="custom-control custom-switch m-0">
      <input class="custom-control-input custom-control-input-success" id="customSwitch1" name="test1" type="radio">
      <label class="custom-control-label font-italic" for="customSwitch1">Feature one</label>
    </p>

    <!-- Custom switch -->
    <p class="custom-control custom-switch m-0">
      <input class="custom-control-input custom-control-input-warning" id="customSwitch2" name="test1" type="radio">
      <label class="custom-control-label font-italic" for="customSwitch2">Feature two</label>
    </p>

    <!-- Custom switch -->
    <p class="custom-control custom-switch m-0">
      <input class="custom-control-input custom-control-input-danger" id="customSwitch3" name="test1" type="radio">
      <label class="custom-control-label font-italic" for="customSwitch3">Feature two</label>
    </p>
  </div>
</div>

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* toggle switches with bootstrap default colors */
.custom-control-input-success:checked ~ .custom-control-label::before {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.custom-control-input-danger:checked ~ .custom-control-label::before {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.custom-control-input-warning:checked ~ .custom-control-label::before {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.custom-control-input-info:checked ~ .custom-control-label::before {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

/* Large toggl switches */
.custom-switch-lg .custom-control-label::before {
    left: -2.25rem;
    width: 3rem;
    border-radius: 1.5rem;
}

.custom-switch-lg .custom-control-label::after {
    top: calc(.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 1.5rem;
}

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
    min-height: 100vh;
    background: #121618;
}