JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
            <button class="modal-close">x</button>
            <h2>Напишите нам</h2>
            <form action="#" method="get" name="modal-form" id="modal-form">
                <div>    
                    <label for="name">Ваше имя:</label>
                    <label for="email">Ваш e-mail:</label>
                    <input type="text" name="name" id="name" form="modal-form" placeholder="Представьтесь пожалуйста">
                    <input type="email" name="email" id="email" form="modal-form" placeholder="Для отправки ответа">
                </div>
                    <label for="letter">Текст письма:</label>
                <textarea name="letter" id="letter" rows="6" form="modal-form" placeholder="В свободной форме"></textarea>
                <input type="submit" name="submit" value="Отправить" id="submit" form="modal-form">
            </form>
        </div>

CSS

/*modal*/

.modal {
    display: none;
}

.modal-open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 760px;
    background: white;
    position: fixed;
    z-index: 1500;
    left: 15%;
    bottom: 40px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 70px 100px 86px;
    -webkit-box-shadow: 0 20px 40px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0 20px 40px 0px rgba(0, 0, 0, 0.75);
}

.modal-open h2 {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    font-size: 45px;
    line-height: 45px;
    margin: 0;
    margin-bottom: 48px;
    padding: 0;
}

.modal-open div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 35px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

}

.modal-open input[type="text"],
.modal-open input[type="email"],
.modal-open textarea {
    padding: 16px 14px;
    border: 2px solid #d7dcde;
    border-radius: 3px;
    width: 328px;
}
.modal-open input[type="text"]:hover,
.modal-open input[type="email"]:hover,
.modal-open textarea:hover {
    border-color: #b4b9bb;
}

.modal-open input[type="text"]:focus,
.modal-open input[type="email"]:focus,
.modal-open textarea:focus {
    border-color: #000000;
}

.modal-open label {
    display: inline-block;
    width: 360px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 9px;
}

.modal-open textarea {
    width: 728px;
}

.modal-open input[type="submit"] {
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    padding: 17px 84px 15px 82px;
    border: none;
    background: #fb565a;
    color: white;
    border-radius: 3px;
    margin: 0;
    margin-top: 45px;
}

.modal-close {
    position: absolute;
    top: 85px;
    right: 100px;
    font-size: 0;
    border: 0;
    background: 0 0;
    cursor: pointer;
 ...

JavaScript

var popup = document.querySelector(".modal");
var close = popup.querySelector(".modal-close");
var link = document.querySelector(".open-modal");

link.addEventListener("click", function(event) {
    event.preventDefault;
    popup.classList.remove("modal");
    popup.classList.add("modal-open");
});

close.addEventListener("click", function(event) {
    event.preventDefault;
    popup.classList.remove("modal-open");
    popup.classList.add("modal");
});

window.addEventListener("keydown", function(event) {
    if (event.keyCode === 27) {
        popup.classList.remove("modal-open");
        popup.classList.add("modal");
    }
});