JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/main.css">
  </head>

  <body>
    <section class="main">
      <div class="left">
        <form class="form" name="form">
          <p class="form__title">Login</p>
          <input class="form__input" type="text" placeholder="Enter login" pattern="^[a-zA-Z]{4,16}$" required>
          <p class="form__title">Password</p>
          <input class="form__input" type="password" placeholder="Enter password" required>
          <p class="form__title">Email address</p>
          <input class="form__input" type="email" placeholder="Enter email" required>
          <button class="btn form__btn btn_theme_add" name="addUser" type="button">Add user</button>
          <button class="btn btn_theme_add form__btn-save" name="saveEditUser" type="button">Edit user</button>
        </form>
      </div>
      <div class="right">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>Login</th>
              <th>Password</th>
              <th>Email</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody class="tbody">
          </tbody>
        </table>
      </div>
    </section>



    <script src="./js/main.js"></script>
  </body>

</html>

CSS

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display:...

JavaScript

const main = document.querySelector('.main');
const form = document.forms.form;
const inputs = document.querySelectorAll('.form__input');
const btnAddUser = document.querySelector('.btn_theme_add');
const btnSaveUser = document.querySelector('.form__btn-save');
const btnEditUser = document.querySelector('.btn_theme_edit');
const btnDeleteUser = document.querySelector('.btn_theme_delete');
const tBody = document.querySelector('.tbody');
let arr = [];

function render() {
  let crtTr = document.createElement('tr');
  for (let i = 0; i < 6; i++) {
    let crtTd = document.createElement('td');
    crtTr.append(crtTd);
  }
  for (let i = 0; i < arr.length; i++) {
    crtTr.childNodes[0].textContent = arr.length;
    crtTr.childNodes[1].textContent = arr[i].login;
    crtTr.childNodes[2].textContent = arr[i].password;
    crtTr.childNodes[3].textContent = arr[i].email;
    crtTr.childNodes[4].innerHTML = '<button class="btn btn_theme_edit" name="editUser" type="button">Edit</button>';
    crtTr.childNodes[5].innerHTML = '<button class="btn btn_theme_delete" name="deleteUser" type="button">Delete</button>';
    tBody.append(crtTr);
  }
};

function addUser() {
  let obj = {
    login: inputs[0].value,
    password: inputs[1].value,
    email: inputs[2].value
  };
  arr.push(obj);
  form.reset();
};

function editUser() {
  console.log('editUser');
};

function deleteUser() {
  let index = event.target.parentNode.parentNode.firstChild.innerHTML;
  if (index == 1) {
    index = 0;
  }
  arr.splice(index, 1);
  console.log(arr);
};

function saveEditUser() {
  console.log('saveEditUser');
};

main.addEventListener('click', event => {
  if (event.target.name == 'addUser') {
    addUser();
    render();
  } else if (event.target.name == 'saveEditUser') {
    saveEditUser();
  } else if (event.target.name == 'editUser') {
    editUser();
  } else if (event.target.name == 'deleteUser') {
    deleteUser();
    render();
  }
});