JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="language-base" lang="pt-BR">
<span class="posted-on" day=20 month=03 year=2016></span>
<p>
<span class="loading-article"></span>
</p>
<footer><a href="#"><span class="read-more"></span></a></footer>
</div>

<button id="btn-english">English</button>
<button id="btn-portuguese">Portugues</button>

SCSS

.language-base[lang=pt-BR] {
  .read-more:before {
    content: "Leia mais";
  }
  .posted-on:before {
    content: "Postado em: " attr(day) "/" attr(month) "/" attr(year);
  }
  .loading-article:before {
    content: "Carregando o artigo...";
  }
}
.language-base[lang=en] {
  .read-more:before {
    content: "Read more";
  }
  .posted-on:before {
    content: "Posted on: " attr(month) "/" attr(day) "/" attr(year);
  }
  .loading-article:before {
    content: "Loading article...";
  }
}

JavaScript

$("#btn-english").click(function(e) {
	$(".language-base").attr("lang", "en");
});
$("#btn-portuguese").click(function(e) {
	$(".language-base").attr("lang", "pt-BR");
});