JSFiddle - React, Tailwind, and code Playground

by e_kurbanov

CSS

.switch-button-container {
    position: relative;
    height: 40px;
    width: 100%;
    overflow: hidden;
    line-height: 40px;
}
.switch-btn {
    position: relative;
    float: left;
    height: 100%;
    font-size: 0.875em;
}
.switch-btn:not(:last-child) {
    border-right: 1px solid #EDEDED;
}
.switch-button-container.two-items .switch-btn {
    width: 50%;
}
.switch-button-container.three-items .switch-btn {
    width: 33.33%;
}
.switch-button-container.four-items .switch-btn {
    width: 25%;
}
.switch-btn .custom-radio {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: block;
    background: #7E7E7E;
    text-align: center;
    color: #fff;
}
.switch-btn input:checked + .custom-radio {
    background: rgb(210, 255, 82);
    color: #fff;
    background: #F4727C;
}