JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Первая форма -->
<div class="pop-up">
  <button class="pop-up-close btn" type="button"></button>
  <form>
    <div class="form-column">
      <label for="name-id">Ваше имя:</label>
      <input type="text" name="name" id="name-id" placeholder="Представьтесь, пожалуйста" required>
    </div>
    <div class="form-column">
      <label for="email-id">Ваш e-mail:</label>
      <input type="text" name="email" id="email-id" placeholder="Для отправки ответа" required>
    </div>
    <label for="text-letter-id">Текст письма:</label>
    <textarea name="text-letter" id="text-letter-id" placeholder="В свободной форме"></textarea>
    <button class="btn" type="submit" name="send">Отправить</button>
  </form>
</div>
<!-- Вторая форма -->
<div class="pop-up-map">
  <button class="pop-up-close btn" type="button"></button>
</div>
<!-- Третья форма -->
  <div class="pop-up-cart">
    <button class="pop-up-close" type="button"></button>
    <form>
      <h1>Товар добавлен в корзину!</h1>
      <div class="buttons-cart">
        <button class="btn" type="submit" name="send">Отправить</button>
        <button class="btn" type="submit" name="continue">Продолжить покупки</button>
    </form>
  </div>
</div>

CSS

.pop-up{
display: none;
position: fixed;
top: 20%;
left: 50%;
z-index: 20000;
width: 460px;
border-top: 7px solid #ee3643;
margin-left: -310px;
padding: 50px 80px;
background: #fff;
box-shadow: 0 20px 35px #626363;
}
.pop-up-opened{
display: block;
animation: bounce 1s;
}
/*Анимация модального окна*/
@keyframes bounce {
0% {
transform: translateY(-1500px);
}
70%{
transform: translateY(30px);
}
100%{
transform: translateY(0);
 }
}
/*Кнопка закрытия pop-up окна*/
.pop-up-close{
position: absolute;
top: 6px;
right: 6px;
width: 41px;
height: 41px;
padding: 0;
outline: none;
border: none;
border-radius: 50%;
background: none;
cursor: pointer;
}
.pop-up-close:hover{
background: none;
}
.pop-up-close::before, .pop-up-close::after{
content: "";
position: absolute;
top: 10px;
right: 15px;
width: 5px;
height: 25px;
transform: rotate(45deg);
background: #ee3643;
}
.pop-up-close:hover::before, .pop-up-close:hover::after{
background: #ca2c37;
}
.pop-up-close::after{
transform: rotate(-45deg);
}
.pop-up .form-column{
display: inline-block;
margin-right: 15px;
font-size: 0;
}
.pop-up .form-column:nth-child(2){
margin-right: 0;
}
.pop-up label{
display: block;
margin-bottom: 10px;
color: #000;
font-size: 18px;
line-height: 18px;
font-weight: 500;
}
.pop-up input[type="text"], .pop-up textarea{
box-sizing: border-box;
width: 220px;
margin-bottom: 20px;
padding: 8px 15px;
outline: none;
border: 2px solid #d7dcde;
border-radius: 3px;
font-family: "Cuprum", "Arial", sans-serif;
font-size: 13px;
line-height: 18px;
font-weight: 500;
cursor: pointer;
}
.pop-up input[type="text"]:hover, .pop-up textarea:hover{
border: 2px solid #a2a9ac;
}
.pop-up input[type="text"]:focus, .pop-up textarea:focus{
border: 2px solid #56bffb;
}
.pop-up textarea{
width: 460px;
min-height: 114px;
margin-bottom: 40px;
}
.pop-up button[type="submit"]{
width: 460px;
outline: none;
border: none;
color: #fff;
font-family: "Cuprum", "Arial", sans-serif;
cursor: pointer;
}
.pop-up...

JavaScript

var popUp = document.querySelector(".pop-up");
var popUpBtn = document.querySelector(".pop-up-btn");
var popUpClose = document.querySelector(".pop-up-close");
var login = popUp.querySelector("#name-id");

popUpBtn.addEventListener("click", function(event){
event.preventDefault();
popUp.classList.add("pop-up-opened");
login.focus();
});
popUpClose.addEventListener("click", function(event){
event.preventDefault();
popUp.classList.remove("pop-up-opened");
});
window.addEventListener("keydown", function(){
if (event.keyCode == 27) {
if (popUp.classList.contains("pop-up-opened")){
popUp.classList.remove("pop-up-opened");
  }
 }
});

var mapBtn = document.querySelector(".map");
var popUpMap = document.querySelector(".pop-up-map");
var popUpMapClose = popUpMap.querySelector(".pop-up-close");

mapBtn.addEventListener("click", function(event){
event.preventDefault();
popUpMap.classList.add("pop-up-map-opened");
});
popUpMapClose.addEventListener("click", function(event){
event.preventDefault();
popUpMap.classList.remove("pop-up-map-opened");
});
window.addEventListener("keydown", function(){
if (event.keyCode == 27) {
if (popUpMap.classList.contains("pop-up-map-opened")){
popUpMap.classList.remove("pop-up-map-opened");
  }
 }
});

var cartBtn = document.querySelector(".buy");
var popUpCart = document.querySelector(".pop-up-cart");
var popUpCartClose = popUpCart.querySelector(".pop-up-close");

cartBtn.addEventListener("click", function(event){
event.preventDefault();
popUpCart.classList.add("pop-up-opened");
});
popUpCartClose.addEventListener("click", function(event){
event.preventDefault();
popUpCart.classList.remove("pop-up-opened");
});
window.addEventListener("keydown", function(){
if (event.keyCode == 27) {
if (popUpCart.classList.contains("pop-up-opened")){
popUpCart.classList.remove("pop-up-opened");
  }
 }
});