JSFiddle - React, Tailwind, and code Playground

by Kaique Covo

HTML

<div class="tabela">
  <h1>Tabela</h1>
  
  <span>Nome:</span>
  <input type="text" id="input_nome" style="text-align: center">
  <span>Idade:</span>
  <input type="text" id="input_idade" style="text-align: center">

  <button onclick="adicionarUsuario();">Adicionar</button>
  
  <table class="tabelaUsuarios">
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
    <tr>
      <td id="td_nome"></td>
      <td id="td_idade"></td>
    </tr>
    </table>
</div>

CSS

.tabela {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-style: unset;
    background-color: #363636;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}

.tabela h1 {
  border-bottom: 1px solid #fff;
}


/*
* Selecionando o elemento button que está dentro da classe .tabela
*/
.tabela button {
  border: 0;
  font-size: 18px;
  background-color: #218838;
  color: #fff;
  border-radius: 10px;
  margin-top: 40px;
  padding: 10px;
}


/*
* CSS DA NOSSA TABELA
*/
.tabelaUsuarios {
  font-family: arial, sans-serif;
  background-color: #ffffff;
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

.tabelaUsuarios td, th {
  border: 1px solid #c400fa;
  text-align: left;
  padding: 8px;
  color: #000;
}

.tabelaUsuarios tr:nth-child(even) {
  background-color: #dddddd;
}

JavaScript

/**
* Função de adicionar usuário na tabela
*/

function adicionarUsuario() {

    var nome = document.getElementById('input_nome').value;
    var idade = document.getElementById('input_idade').value;
    
    var pegarNomeTabela = document.getElementById('td_nome').innerHTML;
    
    var pegarIdadeTabela = document.getElementById('td_idade').innerHTML;


    var addIdade = pegarIdadeTabela + idade + '<br>';
        document.getElementById('td_idade').innerHTML = addIdade;


}

function addNomeTabela() {
	var addNome = pegarNomeTabela + nome + '<br>';
  document.getElementById("td_nome").innerHTML = addNome;
}

/*
* Adiciona usuário na nossa tabela
*/
function addIdadeTabela() {

}