JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="is-active presenceToggle">
    <div class="presenceToggleSide presenceToggleSideActive">
        Active
    </div>
    
    <div class="presenceToggleSide presenceToggleSideInactive">
        <div class="presenceToggleBtn">
            <i class="i i-reorder"></i>
        </div>
        Inactive  
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

body {
    font: 15px helvetica;
}

.presenceToggle {
    position: relative;
    width: 200px;
    border-top: 1px solid #9C9C9C;
    border-bottom: 1px solid #9C9C9C;
    box-shadow: 0 1px #fff;
    margin: 20px;
}

.presenceToggleSide {
    padding: 7px 13px 6px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.37);
}

.presenceToggleSideActive {
    box-shadow: inset 1px 0 #9C9C9C, inset 0 3px 11px rgba(0, 0, 0, 0.19);
    background: #C2D3A3;
}

.presenceToggleSideInactive {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    box-shadow: inset -1px 0 #7C7C7C, inset 0 3px 11px rgba(0, 0, 0, 0.19);
    background: #CE7C7C;
    text-align: right;
    -webkit-transition: 0.4s;
}

.is-active .presenceToggleSideInactive {
    max-width: 79px;
}

.is-inactive .presenceToggleSideInactive {
    max-width:200px;
}

.presenceToggleBtn {
    position: absolute;
    left: 0;
    width: 79px;
    top: 0;
    bottom: 0;
    padding: 6px 0 7px;
    border: 1px solid #A2A2A2;
    border-top: 0;
    border-bottom: 0;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(226, 226, 226, 1) 100%);
    text-align: center;
    cursor: pointer;
}

.presenceToggleBtn > .i {
    display: inline-block;
    -webkit-transform: rotateZ(90deg);
    color: rgb(243, 243, 243);
    text-shadow: 1px 0 0px rgba(0, 0, 0, 0.38), -1px 0 2px rgba(0, 0, 0, 0.19);
}

JavaScript

$('.presenceToggle').on('click', function () {
    $(this).toggleClass('is-active is-inactive');
});