JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <center><button onclick="show('block');">Авторизироваться</button></center>
  
  <!-- Блок для затемнения -->
  <div id="TB_overlay"></div>
  
  <!-- Блок для формы -->
  <div id="div_form">
    <div id="div_header">Авторизация</div>
    <div id="div_body"> </div>
    <div id="content">
       <table>
       <tr><td class = "cl1">Логин:</td> <td><input type="text" size="25" /></td></tr>
       <tr><td class = "cl1">Почта:</td> <td><input type="text" size="25" /></td></tr>
	   <tr><td class = "cl1">Пароль:</td> <td><input type="text" size="25" /></td></tr>
	   <tr><td class = "cl1">Пароль(повторно):</td> <td><input type="text" size="25" /></td></tr>
       </table>   
	   <a href="#" class="button_Ok">Ок</a>
	   <a href="#" class="button_Ok">Отмена</a>
    </div>
  </div>

</body>

CSS

/*Для полей ввода данных*/
input[type=text], input[type=password], textarea { 
 border: 1px solid #777;
}
input {
 vertical-align: middle;
}
input[type=password]:hover, input[type=text]:hover{ 
 background: #ffffe1; 
 border: 1px dashed #555;
}
input[type=password]:focus, input[type=text]:focus, textarea:focus { 
 background: #f8f8f8; 
 border: 1px solid #999;
}


/*Для таблицы форматирования*/
table {
border-collapse: collapse; 
border-width: 0px;
z-index: 200;
}

td {border: 0px solid grey; align: rigth;z-index: 100;}

.cl1{text-align: right;z-index: 200;}

/*Для затемнения всего, кроме формы*/
#TB_overlay {
    display: none; 
    //opacity: 0.8; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    padding: 16px; 
    background-color: rgba(1, 1, 1, 0.8); 
    z-index: 100; 
    overflow: auto; 
}

/*Для создания формов блоков*/
#div_form {
display: none;
border-radius: 10px 10px 10px 10px;
margin: auto;
margin-top: auto;
width: 400px;
height: 232px;
position: fixed;
top: 50%;
left: 50%;
 margin-top: -110px;
 margin-left: -200px;
 box-shadow: 0 0 15px 3px #000;
 z-index: 200;
}

#div_header {
  //border: 1px solid black;
  height: 20px;
  border-radius: 10px 10px 0px 0px;
  background: linear-gradient(to top, #aaa, #fff);
  padding: 5px;
  text-align: center;
  z-index: 200;
}

#div_body {
  border: 1px solid black;
  height: 200px;
  border-radius: 0px 0px 10px 10px;
  background: #000; 
  opacity: 0.5;
  z-index: 200;
}

#content{
  position: relative;
  top: -190px;
  left: 10px; 
  z-index: 200;
}

/*Для кнопок*/
a.button_Ok {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: rgb(209,209,217);
  margin-top: 20px;
  margin-left: 70px;
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
  background: linear-gradient(rgb(110,112,120), rgb(81,81,86)) rgb(110,112,120);
  box-shadow:
   0 1px rgba(255,255,255,.2)...

JavaScript

function show(state){ 
    document.getElementById('div_form').style.display = state;             
    document.getElementById('TB_overlay').style.display = state;              
}