JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn" type="button">Press</button>

<div class="modal">
    <div class="content">
        <div class="close">
            <div class="close_item"></div>
            <div class="close_item2"></div>
        </div>
        <span>Ваш логин</span>
        <br>
        <input type="text" placeholder="Логин" required="Вы не ввели логин">
        <br>
        <span>Ваш пароль</span>
        <br>
        <input type="password" placeholder="Пароль" required="Вы не ввели пароль">
        <br>
        <button class="mess" type="submit">Отправить</button>
    </div>
</div>

CSS

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  position: relative;
  background-color: #4451BAFF;
  padding: 150px 70px;
  border: 1px solid #000;
  border-radius: 30px;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 15px;
}

.close_item {
  position: absolute;
  background-color: #fff;
  width: 26px;
  height: 4px;
  transform: rotate(45deg);
}

.close_item2 {
  background-color: #fff;
  width: 26px;
  height: 4px;
  transform: rotate(-45deg);
}

input {
  padding: 8px 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}

span {
  font-size: 18px;
  font-family: fantasy;
}

JavaScript

var modal = document.querySelector('.modal');

document.querySelector('.btn').addEventListener('click', function () {
	modal.style.display = 'flex';
})

document.querySelector('.close').addEventListener('click', function () {
	modal.style.display = 'none';
})