JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

<div class="toggleWrapper">
  <input type="checkbox" name="toggle1" class="mobileToggle" id="toggle1" checked>
  <label for="toggle1"></label>
</div>

SCSS

// Color Variables
$green: #2ecc71;
$lightgray: lightgray;
$background: whitesmoke;

.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}

.beforeAnimation {
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}

// Mobile Toggle Switch
.toggleWrapper {
  width: 55px;
  input {
    &.mobileToggle {
      opacity: 0; // hides checkbox
      position: absolute;
      
      & + label {
        position: relative;
        display: inline-block;
        user-select: none;
        transition: .4s ease;
        height: 30px;
        width: 50px;
        border: 1px solid #e4e4e4;
        border-radius: 60px;
        &:before {
          @extend .inactiveMixin;
          @extend .beforeAnimation;
          height: 30px;
          width: 51px;
          top: 0;
          left: 0;
          border-radius: 30px;
        }
        &:after {
          @extend .inactiveMixin;
          @extend .afterAnimation;
          background: $background;
          height: 28px;
          width: 28px;
          top: 1px;
          left: 0px;
          border-radius: 60px;
        }
      }
      // When Active
      &:checked {
        & + label:before {
          background: $green; // Active Color
          transition: width .2s cubic-bezier(0, 0, 0, .1);
        }
        & + label:after {
          left: 54px - 30px;
        }
      }
    }
  }
}