JSFiddle - React, Tailwind, and code Playground

by twrasia

HTML

<html>
<ul class="langBar">
    <li><a id="az" href="?lang=az&amp;page=main"></a></li>
    <li><a id="en" href="?lang=en&amp;page=main"></a></li>
    <li><a id="ru" href="?lang=ru&amp;page=main" class="activeLang"></a></li>
</ul>
</html>

CSS

html {
background-color:#000;}
.langBar{
    display: block;
    overflow: hidden;
    float: left;
    width: 125px;
}

.langBar li {
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.langBar li a {
    background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
    display:block;
    width:32px;
    height:32px;
}

.langBar li a#az {
    background-position:0 0;
}

.langBar li a#en {
    background-position:0 -32px;
}

.langBar li a#ru {
    background-position:0 -64px;
}

.langBar li a.activeLang, 
.langBar li a#az.activeLang, 
.langBar li a#en.activeLang, 
.langBar li a#ru.activeLang {
    background-position-x: -46px;
}