JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class='container'>
  <div class='dropdown' id='icecream-dropdown'>
  <div class='dropdown-button'>Please Select</div>
  <span class='triangle'>&#9660;</span>
  <ul class='dropdown-selection'>
    <li>Vanilla</li>
    <li>Chocolate</li>
    <li>Strawberry</li>
    <li>Banana</li>
  </ul>
</div>
</div>

CSS

body,html {
  height:100%;
  margin:0;
  padding:0;
}
.container {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
}
.dropdown {
  display:inline-block;
  font-family:arial;
  position:relative;
  margin:15px;
  font-size:16px;
}
.dropdown-button {
  background:#3498db;
  min-width:160px;
  color:#fff;
  letter-spacing:0.025rem;
  box-sizing:border-box;
  padding:10px 30px 10px 20px;
  border-radius:0px;
  position:relative;
  cursor:pointer;
  transition:background .3s ease;
}
.dropdown-button:hover {
  background:#2980b9;
  transition:background .3s ease;
}
.triangle {
  font-size:50%;
  position:absolute;
  right:10px;
  top:-2px;
  bottom:0;
  margin-top:auto;
  margin-bottom:auto;
  height:5px;
  color:#fff;
}
.dropdown ul.active {
  visibility:visible;
  transition:all .3s ease;
  transform:scaleY(1);
  color:#333;
}
.dropdown ul {
  visibility:hidden;
  overflow:hidden;
  color:#fff;
  transform-origin:top;
  padding:0;
  list-style:none;
  transform:scaleY(0);
  box-shadow:0px 2px 6px 0 rgba(0,0,0,0.2);
  position:absolute;
  left:0;
  margin-top:2px;
  top:100%;
  min-width:90%;
  transition:all .3s ease;
}
.dropdown li {
  background:#fff;
  padding:8px 10px 8px 15px;
  box-sizing:border-box;
  cursor:pointer;
  transition:background .2s ease;
  position:relative;
}
.dropdown li.check {
  background:#f6f6f6;
}
.dropdown li.check:after {
  content:'';
  position:absolute;
  height:15px;
  width:3px;
  background:#ccc;
  top:0;
  bottom:0;
  margin-top:auto;
  transform:rotate(40deg);
  margin-bottom:auto;
  right:15px;
}
.dropdown li.check:before {
  content:'';
  position:absolute;
  height:3px;
  width:9px;
  background:#ccc;
  top:6px;
  bottom:0;
  margin-top:auto;

  margin-bottom:auto;
  right:19px;
}
.dropdown li:hover {
  background:#f6f6f6;
  transition:background .2s ease;
}

JavaScript

var activeDropdown = {};
document.getElementById('icecream-dropdown').addEventListener('click',showDropdown);
                                                          
function showDropdown(event){
  if (activeDropdown.id && activeDropdown.id !== event.target.id) {
    activeDropdown.element.classList.remove('active');
  }
  //checking if a list element was clicked, changing the inner button value
  if (event.target.tagName === 'LI') {
    activeDropdown.button.innerHTML = event.target.innerHTML;
    for (var i=0;i<event.target.parentNode.children.length;i++){
      if (event.target.parentNode.children[i].classList.contains('check')) {
        event.target.parentNode.children[i].classList.remove('check');
      }
    }
    //timeout here so the check is only visible after opening the dropdown again
    window.setTimeout(function(){
          event.target.classList.add('check');
    },500)
  }
  for (var i = 0;i<this.children.length;i++){
    if (this.children[i].classList.contains('dropdown-selection')){
        activeDropdown.id = this.id;
        activeDropdown.element = this.children[i];
        this.children[i].classList.add('active');
     }
    //adding the dropdown-button to our object
    else if (this.children[i].classList.contains('dropdown-button')){
      activeDropdown.button = this.children[i];
    }
  }
}

window.onclick = function(event) {
  if (!event.target.classList.contains('dropdown-button')) {
    activeDropdown.element.classList.remove('active');
  }
}