JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <input type="text" id="name" placeholder="Animal Name" />
  <input type="text" id="gender" placeholder="Animal Gender" />
  <input type="text" id="species" placeholder="Animal Species" />
  <button type="button" onclick="addAnimal()">Add Animal</button>
  <label id="error" class="hidden error"></label>
</div>

<table id="animals">
  <thead>
    <tr>
      <th> Name </th>
      <th> Gender </th>
      <th> Species </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 35px;
}

.wrapper * {
  margin: 5px;
  padding: 5px;
}

.wrapper button {
  height: 40px;
  opacity: 0.8;
}

.wrapper button:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 1;
}

.hidden {
  display: none;
}

.error {
  color: darkred;
  text-align: center;
}

table {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 35px;
}

table th {
  width: 23vw;
  background-color: lightgray;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

table tr {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

JavaScript

let animals = [];

function updateDisplay(identifier) {
  var animal = animals.find(obj => {
    return obj.id === identifier
  });
  var table = document.getElementById('animals').getElementsByTagName('tbody')[0];
  var newRow = table.insertRow();
  //Col 1
  var newCell = newRow.insertCell(0);
  var newText = document.createTextNode(animal.name);
  newCell.appendChild(newText);
  //Col 2
  newCell = newRow.insertCell(1);
  var newText = document.createTextNode(animal.gender);
  newCell.appendChild(newText);
  //Col 3
  newCell = newRow.insertCell(2);
  var newText = document.createTextNode(animal.species);
  newCell.appendChild(newText);
}

function addAnimal() {
  var animal_name = document.getElementById('name');
  var animal_gender = document.getElementById('gender');
  var animal_species = document.getElementById('species');

  if (!handleErrors(animal_name, animal_gender, animal_species)) {
    animals.push({
      id: animals.length + 1,
      name: animal_name.value,
      gender: animal_gender.value,
      species: animal_species.value
    });
    updateDisplay(animals.length);
  }
}

function handleErrors(name, gender, species) {
  var error = document.getElementById('error');
  var errorText = "";

  if (name == null || name.value == '') {
    errorText += "Name cannot be blank. ";
  }

  if (gender == null || gender.value == '') {
    errorText += "Gender cannot be blank. ";
  }

  if (species == null || species.value == '') {
    errorText += "Species cannot be blank. ";
  }

  if (errorText != "") {
    error.classList.remove("hidden");
    error.innerText = errorText;
    return true;
  } else {
    error.classList.add("hidden");
    error.innerText = "";
    return false;
  }
}