JSFiddle - React, Tailwind, and code Playground

by Trifan Alexandru

HTML

<div class="switch-wrapper">
  <div class="switch-area round active">
    <div class="circle">
      <div class="inner-circle">
      </div>
    </div>
  </div>
</div>

CSS

.circle {
  overflow: hidden;
  z-index: 4;
  position: relative;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -ms-border-radius: 30px;
  width: 30px;
  height: 30px;
  border: 1px solid;
  top: -4px;
  background-color: #0081c2;
  transition: all .5s;
}

.inner-circle {
  position: relative;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  width: 12px;
  height: 12px;
  border: 1px solid;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -7px;
  background-color: #f2f2f2;
  z-index: 40;
}

.switch-area {
    cursor: pointer;
  position: relative;
  height: 25px;
  background-color: #f2f2f2;
  width: 50px;
}

.switch-area.round {
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  -ms-border-radius: 9px;
}

.switch-area.active {
  background-color: #65AC33;
}

.switch-area.inactive {
  background-color: #ebebeb;
}

.switch-area.inactive .circle {
  left: 20px;
}

.switch-area.active .circle {
  left: 0px;
}

JavaScript

$('.switch-area').on('click', function() {
  var element = $(this);
  if (element.hasClass('active')) {
    element.removeClass('active');
    element.addClass('inactive');
  } else {
    element.removeClass('inactive');
    element.addClass('active');
  }
})