JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fade">
  <div class="wrapper">  
    <div class="modal">
        <form>
          <input type="text" placeholder="поле 1" >
          <input type="text" placeholder="поле 2" >
        </form>
    </div>
  </div>
</div>

CSS

.fade {
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: 999999;
      overflow: hidden;
      height: 100vh;
}

.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.modal {
    background: #fff;
    border-radius: 10px;
    position: absolute;
    display: block;
    height: 617px;
    width: 560px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0 0 62px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 30px;
}

input {
  display: block;
  width: 100%;
  margin: 30px 0;
  height: 48px;
}