<div class="grid place-items-center h-screen">
  <div class="-mt-[200px]">
    <div class="awesome-select _opened">
      <button class="awesome-select__button">Выберите ваш любимый фильм</button>
      <ul class="awesome-select__list">
        <li class="awesome-select__item">Дети небес</li>
        <li class="awesome-select__item">Вечное сияние чистого разума</li>
        <li class="awesome-select__item">Паразиты</li>
        <li class="awesome-select__item">Три билборда на границе Эббинга, Миссури</li>
        <li class="awesome-select__item">Прежде чем мы расстанемся</li>
      </ul>
    </div>
  </div>
</div>
.awesome-select {
  position: relative;
  display: block;
}

.awesome-select__button {
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  position: relative;
  padding: .5rem 2.5rem .5rem 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 4px;
}

.awesome-select__button::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWNhcmV0LWRvd24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxwYXRoIGQ9Ik0xOCAxNWwtNiAtNmwtNiA2aDEyIiB0cmFuc2Zvcm09InJvdGF0ZSgxODAgMTIgMTIpIj48L3BhdGg+PC9zdmc+') no-repeat center center / 60%;
  width: 2rem;
  height: 100%;
}

.awesome-select._opened .awesome-select__button::after {
  transform: rotate(180deg);
}

.awesome-select__list {
  z-index: 10;
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  width: 100%;
  background-color: white;
  padding: .25rem 0;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.awesome-select._opened .awesome-select__list {
  display: block;
}

.awesome-select__item {
  padding: .5rem 1rem;
  white-space: nowrap;
  cursor: pointer;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.awesome-select__item._selected,
.awesome-select__item:hover {
  background-color: #f1f1f1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com?plugins=typography