JSFiddle - React, Tailwind, and code Playground

select (не очень реализация)

HTML

<select name="" id="reservation-select">
                <option class="reservation-option _reqSelect" value=""></option>
              </select>
              <div class="custom-select">
                <p class="custom__select__title">
                  Выберите количество
                </p>
                <i class="fal fa-angle-up"></i>
                <div class="dropdown-select">
                  <div class="dropdown-item">1</div>
                  <div class="dropdown-item">2</div>
                  <div class="dropdown-item">3</div>
                  <div class="dropdown-item">4+</div>
                </div>
              </div>

CSS

.reservationForm{
  width: 100%;
}
.form__holder{
  width: 100%;
  display: grid;
  grid-template-columns: 48% 48%;
  justify-content: space-between;
  grid-row-gap: 12px;
  margin: 35px 0;
}
.form__item{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
}
.item-form{
  height: 52px;
  width: 100%;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
  padding: 0.375rem 0.75rem;
  font-family: 'Poppins', sans-serif;
}
.form__title{
  font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
  color: black;
  font-weight: 600;
  margin-bottom: 10px;
}
.item-form::placeholder{
  font-family: 'Poppins', sans-serif;
  color: #666;
  font-size: calc(13px + 2 * ((100vw - 320px) / (1280 - 320)));
}
#reservation-select{
  display: none;
}
.custom-select{
  height: 52px;
  width: 100%;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: calc(15px + 3 * ((100vw - 320px) / (1280 - 320)));
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.custom-select.empty{
  border-color: red;
}
.custom__select__title{
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.custom-select i{
  transform: rotate(180deg);
  font-size: 20px;
}
.dropdown-select{
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  border: 1px solid black;
  transform: translateY(40px);
  transition: 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.dropdown-select.active{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.dropdown-item{
  width: 100%;
  background: white;
  padding: 0.375rem 0.75rem;
}
.dropdown-item:hover{
  background: black;
  color: white;
}
.dropdown-item.active{
  background: black;
  color: white;
}
.reservation-button{
  margin: 0 auto;
  display: flex;
  justify-content:...

JavaScript

let option = document.querySelector('.reservation-option');
let customSelect = document.querySelector('.custom-select');
let customSelectTitle = document.querySelector('.custom__select__title');
let dropdownSelect = document.querySelector('.dropdown-select');
let selectItem = document.querySelectorAll('.dropdown-item');
customSelect.onclick = function(){
  dropdownSelect.classList.toggle('active');
  for(let i = 0;i<selectItem.length;i++){
    selectItem[i].onclick = function(){
      for(let i = 0;i<selectItem.length;i++){
        selectItem[i].classList.remove('active');
      }
      selectItem[i].classList.add('active');
      option.value = selectItem[i].innerHTML;
      customSelectTitle.innerHTML = selectItem[i].innerHTML;
    }
  }
}