JSFiddle - React, Tailwind, and code Playground

by Aleksey Nemiro

HTML

<input id="lang" type="checkbox" /><label for="lang" data-en="Моя твоя не понимать!" data-ru="My brain doesn't understand it..."></label>
<hr />
<div class="title" data-en="Hello, world!" data-ru="Привет, мир!"></div>
<div class="text" data-en="Yes, this is crazy, but this is CSS localization!" data-ru="Это безумие, но это действительно локализация силами CSS!"></div>

CSS

#lang {
    display: none;
}
label{
    font-weight:bold;
    cursor: pointer;
}
label:before {
    content: attr(data-en)
}
#lang:checked + label:before {
    content: attr(data-ru)
}

.title:before{
    content: attr(data-en);
}

.text:before{
    content: attr(data-en);
    white-space: pre;
}

#lang:checked ~ .title:before{
    content: attr(data-ru); 
}

#lang:checked ~ .text:before{
    content: attr(data-ru);
    white-space: pre;
}