JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div class="umaclasse">
   <span id="default" class="botao">Default</span>
   <span id="default" class="frase">Está é uma mensagem default</span>
</div>
<br />
<br />
<div class="umaclasse">
   <span id="sucesso" class="botao">Sucesso</span>
   <span id="sucesso" class="frase">Uma mensagem de sucesso é sempre bem-vinda</span>
</div>
<br />
<br />
<div class="umaclasse">
   <span id="info" class="botao">Informação</span>
   <span id="info" class="frase">Está é uma informação importante</span>
</div>
<br />
<br />
<div class="umaclasse">
   <span id="aviso" class="botao">Aviso</span>
   <span id="aviso" class="frase">Peço que tenha mais cuidado no futuro</span>
</div>
<br />
<br />
<div class="umaclasse">
   <span id="erro" class="botao">Erro</span>
   <span id="erro" class="frase">Algo correu mal</span>
</div>

CSS

.botao, .frase {color: #fff;padding: 3px;border-radius: 3px;}
#default {background: grey;}
#sucesso {background: green;}
#info {background: rgb(12, 111, 238);}
#aviso {background: rgb(165, 165, 6);}
#erro {background: red;}
.frase { display: none; }
.umaclasse:hover .botao { display: none; }
.umaclasse:hover .frase { display: initial; }