JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<div class="dropdown">
  <div class="dropdown-title">
    <span class="dropdown-text">Name A-Z</span>
    <span class="dropdown-arrow"></span>
  </div>
  <div class="list-dropdown">
    <ul>
      <li><span>Name A-Z</span></li>
      <li><span>Name Z-A</span></li>
      <li><span>Price: Low to High</span></li>
      <li><span>Price: High to Low</span></li>
      <li><span>Stock: Increasing</span></li>
      <li><span>Stock: Decreasing</span></li>
    </ul>
  </div>
</div>

SCSS

.dropdown {
  width: 200px;
  height: 30px;
  background: #333;
  line-height: 30px;
  cursor: pointer;
  position: relative;
  .dropdown-title {
    .dropdown-text {
      color: #FFF;
      float: left;
      margin-left: 10px;
    }
    .dropdown-arrow {
      float: right;
      &:after {
        content: '+';
        margin-right: 10px;
        color: #FFF;
      }
    }
  }
  .list-dropdown {
    display: none;
    position: absolute;
    top: 30px;
    width: 100%;
    ul {
      margin: 0;
      padding: 0;
      li {
        height: 30px;
        line-height: 30px;
        color: #FFF;
        background: #333;
        span {
          margin-left: 10px;
        }
        &:hover {
          color: #0A0;
        }
      }
    }
  }
}

JavaScript

document.querySelector('.dropdown').addEventListener('click', function() {	
	if (this.childNodes[3].style.display == 'block') {
  	this.childNodes[3].style.display = 'none';
  	return;
  }
	this.childNodes[3].style.display = 'block';
});

var li = document.querySelectorAll('.dropdown > .list-dropdown > ul > li');
var a = 0;

while (a < li.length) {
	li[a].addEventListener('click', function() {
    this.parentNode.parentNode.parentNode.childNodes[1].childNodes[1].textContent = this.childNodes[0].textContent;
  });
  a++;
}