JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="dropdown" id="dropdown">
  <div class="dropdown__label mx-auto"></div>
  <div class="dropdown__info mx-auto"></div>
</div>

CSS

.dropdown {
  position: relative;
  /*width: 100%;*/
}

.dropdown__label {
  /*font-weight: 600;*/
  background: rgba(238, 238, 238, .95);
  /*width: 100%;*/
  /*max-width: 80%;*/
  padding: 10px 15px;
  border: 1px solid #484848;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.dropdown__label:hover {
  cursor: pointer;
  color: #F1EBEA;
  background: rgba(0, 0, 0, .4);
}

.dropdown__menu {
  display: none;
  width: 100%;
  position: absolute;
  z-index: 1;
  /*max-width: 80%;*/
  /*left: 50%;*/
  /*transform: translate(-50%);*/
  list-style: none;
  padding: 0;
  background: rgba(238, 238, 238, .95);
  border: 1px solid #484848;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.dropdown__menu li {
  padding: 5px 10px;
  -webkit-transition: all 0.55s;
  -moz-transition: all 0.55s;
  -ms-transition: all 0.55s;
  -o-transition: all 0.55s;
  transition: all 0.55s;
}

.dropdown__menu li:first-child {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.dropdown__menu li:last-child {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.dropdown__menu li:hover {
  background: rgba(0, 0, 0, .4);
  color: #F1EBEA;
  cursor: pointer;
}

.dropdown__info {
  margin-top: 15px;
  /*width: 100%;*/
  /*max-width: 80%;*/
}

.information {
  display: block;
  /*font-weight: 600;*/
  background: rgba(238, 238, 238, .95);
  padding: 10px 15px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.dropdown.open .dropdown__menu {
 ...

JavaScript

class Dropdown {
  constructor(selector, option) {
    document.querySelector('.dropdown__label').insertAdjacentHTML('afterEnd', `<ul class="dropdown__menu"></ul>`);

    this.$el = document.querySelector(selector);
    this.items = option.items;
    this.cities = option.cities;

    this.$el.querySelector('.dropdown__label').textContent = 'Выберите город';

    this.$el.addEventListener('click', event => {
      if (event.target.classList.contains('dropdown__label')) {
        if (this.$el.classList.contains('open')) {
          this.close();
        } else {
          this.open();
        }
      } else if (event.target.tagName.toLowerCase() === 'li' || event.target.tagName.toLowerCase() === 'a') {
        this.select(event.target.dataset.id);
      } 
    });
		
		this.$el.closest(`html`).addEventListener(`click`, event => {
			if (!event.target.classList.contains('dropdown__label'))
			  this.close();
		});

    const itemsHTML = this.items.map(i => {
      return `<li data-id="${i.id}">${i.label}</li>`;
    }).join('');
    this.$el.querySelector('.dropdown__menu').insertAdjacentHTML('afterbegin', itemsHTML);
  }

  open() {
    this.$el.querySelector('.dropdown__info').innerHTML = ``;
    this.$el.classList.add('open');
  }

  close() {
    this.$el.classList.remove('open');
  }

  select(id) {
    const item = this.items.find(i => i.id === id);
    this.$el.querySelector('.dropdown__label').textContent = item.label;

    const cities = this.cities.find(i => i.id === id);
    this.$el.querySelector('.dropdown__info').innerHTML = `<div class="information">Узнать более подробно о городе: <a href="${cities.link}" target="_blank" rel="nofollow noopener" data-id="${cities.id}">${cities.label}</a></div>`;
    this.close();
  }

}


const dropdown = new Dropdown('#dropdown', {
  items: [{
      label: 'Москва',
      id: 'mow'
    },
    {
      label: 'Санкт-Петербург',
      id: 'led'
    },
    {
      label: 'Новосибирск',
      id: 'ovb'
    },
  ],
  cities:...