JSFiddle - React, Tailwind, and code Playground

by jdmiller82

HTML

<div class="toggle-switch">
    <div class="toggle on inactive">On</div>
    <div class="toggle off">Off</div>
</div>

CSS

.toggle-switch {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    padding: 0;
    width: 79px;
    height: 30px;
    background: #c8c8c8;
    border-radius: 3px;
    /*border-top: 1px solid #b7b7b7;*/
    border-right: 1px solid #b7b7b7;
    border-left: 1px solid #b7b7b7;
    border-bottom: 1px solid #919191;
}

.on, .off {
   display: block;
   width: 38px;
   height: 26px;
   background: #fff;
   cursor: pointer;
   text-align: center;
   line-height: 28px;
}

.on {
    float: left;
    border-radius: 3px 0 0 3px;
    border-top: 1px solid #b7b7b7;
    border-left: 1px solid #b7b7b7;
    border-bottom: 1px solid #919191;
}

.on.inactive {
    margin-top:-5px;
    -webkit-transform: skew(15deg) rotate(15deg);
    background: #eaeaea;
}

.off {
    float: right;
    border-radius: 0 3px 3px 0;
    border-top: 1px solid #b7b7b7;
    border-right: 1px solid #b7b7b7;
    border-bottom: 1px solid #919191;
}

.off.inactive {
    margin-top:-5px;
    -webkit-transform: skew(-15deg) rotate(-15deg);
    background: #eaeaea;
}

JavaScript

$('.toggle').click(function(){
    $('.toggle').toggleClass('inactive');
});