JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="tabelatitle">Tabela de horários da Maré</h1>

<table class="tg">
    <tr>
        <th class="tg-xdyu">Dia</th>
        <th class="tg-031e">Manhã</th>
        <th class="tg-031e">Tarde</th>
        <th class="tg-031e">Noite</th>
    </tr>
    <tr>
        <td class="tg-031e" id="segunda">Segunda-Feira</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Agitado</td>
        <td class="tg-031e">Agitado</td>
    </tr>
    <tr>
        <td class="tg-031e">Terça-Feira</td>
        <td class="tg-031e">Normal</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Normal</td>
    </tr>
    <tr>
        <td class="tg-031e">Quarta-Feira</td>
        <td class="tg-031e">Agitado</td>
        <td class="tg-031e">Agitado</td>
        <td class="tg-031e">Agitado</td>
    </tr>
    <tr>
        <td class="tg-031e">Quinta-Feira</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Normal</td>
        <td class="tg-031e">Agitado</td>
    </tr>
    <tr>
        <td class="tg-031e">Sexta-Feira</td>
        <td class="tg-031e">Normal</td>
        <td class="tg-031e">Normal</td>
        <td class="tg-031e">Normal</td>
    </tr>
    <tr>
        <td class="tg-031e">Sábado</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Normal</td>
        <td class="tg-031e">Agitado</td>
    </tr>
    <tr>
        <td class="tg-031e">Domingo</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Calmo</td>
        <td class="tg-031e">Calmo</td>
    </tr>
</table>
<button onclick="traduzir()" id="botao">Traduzir</button>

JavaScript

var idiomas = {
        pt:{
            pt:"Português", en:"Inglês", es:"Espanhol", alt:["en","es"],
            titulo:"Tabela de horários da Maré",
            traduzir:"Traduzir",
            escolha:"Escolha um idioma: ", escolhaErro:"Você precisa escolher um idioma",
            cabecalhos:["Dia", "Manhã", "Tarde", "Noite"],
            diasSemana:["Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira",
                        "Sexta-Feira","Sábado","Domingo"],
            calmo:"Calmo", normal:"Normal", agitado:"Agitado"
        },
        en:{
            pt:"Portuguese", en:"English", es:"Spanish", alt:["es","pt"],
            titulo:"The tide times table",
            traduzir:"Translate",
            escolha:"Choose a language: ", escolhaErro:"You need to choose a language",
            cabecalhos:["Dia", "Manhã", "Tarde", "Noite"],
            diasSemana:["Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira",
                        "Sexta-Feira","Sábado","Domingo"],
            calmo:"Calmo", normal:"Normal", agitado:"Agitado"
        },
        es:{
            pt:"Portugués", en:"Inglés", es:"Español", alt:["en","pt"],
            titulo:"Tabla de horarios de las mareas",
            traduzir:"Traducir",
            escolha:"Eligir un idioma: ", escolhaErro:"Usted tiene que elegir un idioma",
            cabecalhos:["Dia", "Manhã", "Tarde", "Noite"],
            diasSemana:["Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira",
                        "Sexta-Feira","Sábado","Domingo"],
            calmo:"Calmo", normal:"Normal", agitado:"Agitado"
        }
    };


//funcao modelo
function traducao(atual, alternativas) {
    var langarray1 = atual[alternativas[0]], langarray2 = atual[alternativas[1]], 
        lang1 = atual[alternativas[0]], lang2 = atual[alternativas[1]],
        tabletitle1 = idiomas[alternativas[0]].titulo, tabletitle2 = idiomas[alternativas[1]].titulo,
        buttonvalue1 = idiomas[alternativas[0]].traduzir,...