JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button-transp{
	width: 210px; 
	height: 80px;
	overflow: hidden;
	background: none;
	border: none;
	text-indent: 10000px;
	margin-bottom: -20px;
	cursor: pointer;
	overflow: hidden;	
	background: url(http://premioeducacao.ramosdesignservidor.com.br/wp-content/uploads/2017/03/01-yellow-white.png) top center no-repeat;
}

.button-transp:hover{
	background-position: bottom center;
}

body {
	background-color: #D40003;
}
</style>
<body>
<div class="w3-bar w3-black">
  <button class="button-transp" onclick="openCity('escolha')"></button>
  <button class="button-transp" onclick="openCity('inscricao')"></button>
  <button class="button-transp" onclick="openCity('avaliacao')"></button>
<button class="button-transp" onclick="openCity('preselecao')"></button>
<button class="button-transp" onclick="openCity('coletiva')"></button>
<button class="button-transp" onclick="openCity('premiacao')"></button>
</div>

<div class="w3-container city" id="escolha" style="color: #FFFFFF">
  <p>O professor escolhe algum projeto ou uma sequência de atividades que desenvolveu no ano letivo de 2016 e/ou 2017 para participar do Prêmio.</p>
</div>

<div id="inscricao" class="w3-container city" style="display:none; color: #FFFFFF">
  <p>O professor, então, lê o regulamento e faz a inscrição aqui no site do Prêmio, preenchendo todos os campos. O relato do projeto, preenchido de acordo com o modelo fornecido no site, deve ser anexado à inscrição.</p> 
</div>

<div id="avaliacao" class="w3-container city" style="display:none; color: #FFFFFF">
  <p>O avaliador de cada categoria analisa o relato com muita atenção. Se o avaliador tiver alguma dúvida sobre o projeto, poderá entrar em contato com o professor. Nesta situação, podem ser solicitados registros das atividades e das produções feitas pelos alunos.</p>
</div>

<div id="preselecao" class="w3-container city" style="display:none;...

CSS

.button-transp{
	width: 210px; 
	height: 80px;
	overflow: hidden;
	background: none;
	border: none;
	text-indent: 10000px;
	margin-bottom: -20px;
	cursor: pointer;
	overflow: hidden;	
	background: url(http://premioeducacao.ramosdesignservidor.com.br/wp-content/uploads/2017/03/01-yellow-white.png) top center no-repeat;
}

.button-transp:hover{
	background-position: bottom center;
}

body {
	background-color: #D40003;
}