JSFiddle - React, Tailwind, and code Playground

HTML

<div class="side_panel"> 
  <button type="button" onclick="open_form_add_system()">הוספת מערכת</button>
</div>

<div class="container" style="display: none;" id="container_add_system">
  <form>
    <h1>הוספת מערכת</h1>
    <label for="system_number"><h3><b>מספר מערכת</b></h3></label>
    <input value="" type="text" id="system_number" name="system_number" required>
    <label for="system_password"><h3><b>סיסמה</b></h3></label>
    <input  value="" type="password" id="system_password" name="system_password" required>

    <input  value="|" type="password" hidden>
    <button type="button" style="background-color: rgb(0, 222, 100); color: black;" onclick="loginymt()">הוספה</button>
    <button type="button" id="close" onclick="close_form_add_system()">סגירה</button>
  </form>
</div>

CSS

table, th, td {
  width:80%;
  margin-right:auto;
  margin-left: auto ;
  text-align: center;
  background-color: rgb(154, 227, 242);
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin-right:auto;
  margin-left: auto ;
  text-align: center;
}
h1 ,h3 ,h6{
  text-align: center;
}


input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}


.container {
  width: 40%;
  background-color: #9cefe8;
  padding: 20px;
  margin: auto;
}
#container_add_system.container {
  width: 40%;
  background-color: #9cefe8;
  padding: 20px;
  margin: auto;
  text-align: center;
}

#container_my_settings.container {
  width: 40%;
  background-color: #9cefe8;
  padding: 20px;
  margin: auto;
  text-align: center;
}

#container_my_settings.container button[type=button]{
  width: 100%;
  padding: 5px;
  border: none;
  border-radius: 1px;
  box-sizing: border-box;
  margin-top: none;
  margin-bottom: 16px;
  background-color: #59e9f3;
  color: rgb(14, 12, 12);
}
#container_my_settings.container #close{
  background-color: #de6868;
}
#container_add_system.container #close{
  background-color: #de6868;
  padding: 5px;
  border: none;
}

.container button[type=button] {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  background-color: #13c886;
  color: white;
}


.side_panel {
  width: 10%;
  background-color: #9cefe8;
  padding: 20px;
  margin-left: auto;
  text-align: center;
}

.side_panel button[type=button] {
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  background-color: #9cefe8;
  color: rgb(0, 0, 0);
}

.data_numbers_system {
  width: 89%;
  background-color: rgb(186, 228, 237);
  padding: 20px;
  margin-right: auto;
  text-align: center;
}

JavaScript

function open_form_add_system() {
    document.getElementById("container_add_system").style.display = "block"; 
}
function close_form_add_system() {
    document.getElementById("container_add_system").style.display = "none";
}