JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="tfv-form-vertical-item-control">
  <div class="switch-container">
  <span class="switch-label">Inhouse</span>
    <label class="switch">
      <span  class="slider-round right"></span>
    </label> 
  <span class="switch-label bold">Client</span></div>
</div>

CSS

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  top: 8px;
  float: right;
}

.switch .slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  border-radius: 34px;
}

@-webkit-keyframes moveLeft {
  from { left: 0px; }
  to { left: 30px; }
}

@keyframes moveLeft {
  from { left: 0px; }
  to { left: 30px; }
}

.switch .slider-round.right {
  background-color: #606060;
}

.slider-round.right:before {
/* -webkit-animation: moveLeft 0.4s linear;
  animation: moveLeft 0.4s linear; */
/*   animation-direction: reverse;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; */
  } 

.switch .slider-round.left {
  background-color: #606060;
}

.switch .slider-round.left:before {
  /* -webkit-animation: moveLeft 0.4s linear;
  animation: moveLeft 0.4s linear; */
/*   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;  */
}

.switch .slider-round.colored.right {
  background-color: #3cb888;
}

.switch .slider-round.colored.left {
  background-color: #03aeee;
}

.switch .slider-round:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-color: #fff;
  border-radius: 50%;
/*   -webkit-animation: moveLeft 0.4s infinite;
  animation: moveLeft 0.4s infinite; */
}