JSFiddle - React, Tailwind, and code Playground

by Zaiste

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="jumbotron">
  <h1>On/Off Switch</h1>
  <p class="lead">Bootstrap Button Toggle</p>
</div>

<div class="container example">

  <div class="row">
    <div class="col-sm-12">
      <h3>Default Color <small>(Brand Primary)</small></h3>
    </div>
  </div>

  <div class="row">

    <div class="col-sm-2">
      <h6>Large</h6>
    </div>

    <div class="col-sm-5">
      <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
        <div class="handle"></div>
      </button>
    </div>

    <div class="col-sm-5">
      <button type="button" class="btn btn-lg btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
        <div class="handle"></div>
      </button>
    </div>

  </div>

  <div class="row">

    <div class="col-sm-2">
      <h6>Default</h6>
    </div>

    <div class="col-sm-5">
      <button type="button" class="btn btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
        <div class="handle"></div>
      </button>
    </div>

    <div class="col-sm-5">
      <button type="button" class="btn btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
        <div class="handle"></div>
      </button>
    </div>

  </div>

  <div class="row">

    <div class="col-sm-2">
      <h6>Small</h6>
    </div>

    <div class="col-sm-5">
      <button type="button" class="btn btn-sm btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
        <div...

SCSS

$brand-primary: #29b5a8;
$brand-secondary: #ff8300;
$gray: #6b7381;
$gray-light: lighten($gray, 15%);
$gray-lighter: lighten($gray, 30%);
$btn-default-color: $gray;
$btn-default-bg: $gray-lighter;
$toggle-default-size: 1.5rem;
$toggle-default-label-width: 4rem;
$toggle-default-font-size: .75rem;

body {
  font-family: 'Montserrat', 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
  color: $gray;
  background: #f2f2f2;
}

.jumbotron {
  background: $gray;
  color: $gray-lighter;
  h1 {
    color: #fff;
  }
}

.example {
  margin: 4rem auto;
  >.row {
    margin-top: 2rem;
    height: 5rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid fade($gray-lighter, 50%);
    &:first-of-type {
      border: none;
      height: auto;
      text-align: left;
    }
  }
  h3 {
    font-weight: 400;
    >small {
      font-weight: 200;
      font-size: .75em;
      color: $gray-light;
    }
  }
  h6 {
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: 3.32px;
    text-transform: uppercase;
    color: $gray-lighter;
    margin: 0;
    line-height: 5rem;
  }
  .btn-toggle {
    top: 50%;
    transform: translateY(-50%);
  }
}

// Mixin for Switch Colors
// Variables: $color, $bg, $active-bg
@mixin toggle-color($color: $btn-default-color,
$bg: $btn-default-bg,
$active-bg: $brand-primary
) {
  color: $color;
  background: $bg;
  &:before,
  &:after {
    color: $color;
  }
  &.active {
    background-color: $active-bg;
  }
}

// Mixin for Default Switch Styles
// Variables: $size, $margin, $color, $bg, $active-bg, $font-size
@mixin toggle-mixin($size: $toggle-default-size,
$margin: $toggle-default-label-width,
$font-size: $toggle-default-font-size
) {
  // color: $color;
  // background: $bg;
  margin: 0 $margin;
  padding: 0;
  position: relative;
  border: none;
  height: $size;
  width: $size * 2;
  border-radius: $size;
  &:focus,
  &.focus {
    &,
    &.active {
      outline: none;
    }
  }
  &:before,
 ...