JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

<label class="lang-toogle"><input type="checkbox"/><div>
    <div class="mrect rcolor1"></div>
    <div class="mrect rcolor2"></div>
    <div class="mrect rcolor3"></div>    
    </div></label>

CSS

body,html{
    padding:0;
    margin:0;
}

.lang-toogle .mrect{
    position:relative;
    width:100%;
    height:33.3333%;
    transition:0.5s;
}

.lang-toogle input{
    display:none;
}

.lang-toogle .rcolor1{
     background-color:white;    
}
.lang-toogle .rcolor2{
     background-color:blue;    
}
.lang-toogle .rcolor3{
     background-color:red;    
}

.lang-toogle input + div:before{
    content:"RU";
    font-family:Arial;
    font-size:42px;
    text-align: center;
    text-shadow:0 0 5px black;
    color:white;    
    z-index:2;   
    width: 100%;
    height: 50%;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.lang-toogle > div{
    position: relative;
    width:100px;
    height:90px;
}

.lang-toogle input:checked + div:before{
    content:"UK";
}

.lang-toogle input:checked + div > div{
    height:50%;
}

.lang-toogle input:checked + div > .rcolor1{
    height:0;
}

.lang-toogle input:checked + div > .rcolor3{
    background-color:yellow;
}