JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="input-switch">
  <div class="input-switch-container">
    <span class="input-switch-on">ON</span>
    <span class="input-switch-empty"></span>
    <span class="input-switch-off">OFF</span>
  </div>
</div>

CSS

*,
*::before,
*::after{
  box-sizing: border-box;
}

.input-switch{
  border-radius: .25rem;
  width: 112px;
  border: 1px solid #ddd;
  
}

.input-switch-container{
  position: relative;
  display: flex;
  overflow: hidden;
}

.input-switch-on, 
.input-switch-off,
.input-switch-empty{
  padding: .25rem 1rem;
  line-height: 1.5;
  flex: 0 0 50%;
}

.input-switch-on{
  background-color: #007bff;
  color: #fff;
}

.input-switch-off{
  background-color: #f1f1f1;
}

.input-switch-empty{
  background-color: #fff;
}