JSFiddle - React, Tailwind, and code Playground

by Harsh Kansagara

HTML

<div class="video">
  <div class="video__bar">
    <div class="video__actions"></div>
    <div class="video__settings">
      <button id="video-quality-toggle" class="video__button">
        <img src="https://api.iconify.design/mdi:cog.svg">
      </button>
    </div>
  </div>
  
  <div id="video-quality-dropdown" class="video__quality hidden">
    <button>360p</button>
    <button>480p</button>
    <button>720p</button>
    <button>1080p</button>
  </div>
</div>

SCSS

.video {
  width: 640px;
  height: 320px;
  background: #dadada;
  position: relative;
}

.hidden {
  display: none!important;
}

.video__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video__quality {
  position: absolute;
  bottom: 40px;
  right: 4px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  overflow: hidden;

  button {
    height: 28px;
    background: transparent;
    color: #fff;
    border: none;
    padding: 0px 20px;

    +button {
      border-top: 1px solid rgba(0, 0, 0, 0.9);
    }
  }
}

.video__button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}

JavaScript

document
.querySelector('#video-quality-toggle')
.addEventListener('click',function(){
	document
  	.querySelector('#video-quality-dropdown')
    .classList.toggle('hidden')
})