JSFiddle - React, Tailwind, and code Playground

HTML

<section class="search_hotels">
    <h2>Заинтересовались?</h2>
    <p>Укажите предполагаемые даты поездки, <br> и мы покажем вам лучшие предложения гостиниц в Седоне</p>
    <a class="btn btn_search_hotels" href="form.html">Поиск гостиницы в Седоне</a>
    <div class="search_hotels_map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52385.1805059623!2d-111.83015791949359!3d34.854373381054565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2z0KHQtdC00L7QvdCwLCDQkNGA0LjQt9C-0L3QsCA4NjMzNiwg0KHQqNCQ!5e0!3m2!1sru!2sru!4v1521976961081" width="1200" height="570" style="border:0" allowfullscreen></iframe>
    </div>
    <div class="search_modal">
        <form class="search_form" action="https://echo.htmlacademy.ru" method="get" name="search_hotels_form">
            <p class="search_form_item">
                <label for="arrival">Дата заезда:</label>
                <input id="arrival" type="text" name="arrival" value="24 апреля 2017">
              </p>
            <p class="search_form_item">
                <label for="leave">Дата выезда:</label>
                <input id="leave" type="text" name="leave" value="4 июля 2017">
            </p>
            <p class="search_form_item">
                <label for="adults">Взрослые:</label>
                <input id="adults" type="text" name="adults" value="2">
            </p>
            <p class="search_form_item">
                <label for="children">Дети:</label>
                <input id="children" type="text" name="children" value="0">
            </p>
            <button class="btn btn_find" type="submit">Найти</button>
        </form>
    </div>
</section>

CSS

.search_hotels {
    line-height: 24px;
    position: relative;
    text-align: center;
}

.search_hotels_map {
    min-height: 593px;
    background-color: #f2f1ee;
}

.search_hotels_map iframe {
    position: relative;
}

.search_hotels h2 {
    font-size: 30px;
    line-height: 36px;
    color: #000000;
}

.btn {
    display: inline-block;
    vertical-align: middle;
    font-size: 21px;
    line-height: 26px;
    font-weight: 700;
    color: #ffffff;
}

.btn_search_hotels {
    margin-top: 30px;
    padding: 30px 140px;
    background-color: #766357;
}

.btn_search_hotels:hover {
    background-color: #604e43;
}

.btn_search_hotels:active {
    color: #928a85;
    background-color: #503e33;
}

.search_modal {
    position: absolute;
    top: 240px;
    left: 50%;
    padding: 55px 55px;
    transform: translateX(-50%);
	display: none;
    width: 570px;
    text-align: right;
    background-color: #ffffff;
}

.search_modal_show {
	display: block;
}

.search_form {
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.search_form_item {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    width: 458px;
    margin-bottom: 27px;
}

.search_form_item:nth-child(3) {
    width: 226px;
}

.search_form_item:nth-child(4) {
    width: 180px;
    margin-left: auto;
}

.search_form_item:nth-child(3) input,
.search_form_item:nth-child(4) input {
    width: 114px;
    margin-left: auto;
    text-align: center;
}

.search_form_item input {
    width: 346px;
    padding: 5px 13px;
    font-size: 14px;
    line-height: 26px;
    font-weight: 700;
    background-color: #f2f2f2;
    border: 2px solid #f2f2f2;
    text-transform: uppercase;
}

.search_form_item input:hover {
    background-color: #ebebeb;
}

.search_form_item input:focus {
    border: 2px solid #e5e5e5;
    background-color: #ffffff;
}

.search_form_item label {
    font-size: 14px;
    line-height: 26px;
    font-weight: 700;
    color: #000000;
 ...

JavaScript

var link = document.querySelector(".btn_search_hotels");
  
var popup = document.querySelector(".search_modal");

var form = popup.querySelector("form");
var arrival = popup.querySelector("[name=arrival]");
var leave = popup.querySelector("[name=leave]");
var adults = popup.querySelector("[name=adults]");
var children = popup.querySelector("[name=children]");
  

link.addEventListener("click", function (evt) {
	evt.preventDefault();
	popup.classList.toggle("search_modal_show");
	arrival.focus();
  });
  
form.addEventListener("submit", function (evt) {
	if (!arrival.value || !leave.value || !adults.value || !children.value) {
	evt.preventDefault();
	console.log("Нужно заполнить поля");
	} 	
});