JSFiddle - React, Tailwind, and code Playground

by nik kechagias

HTML

<div id="selectDiv">1
  <ul id="select">
    <li class="liNum">1</li>
    <li class="liNum">2</li>
    <li class="liNum">3</li>
    <li class="liNum">4</li>
    <li class="liNum">5</li>
    <li class="liNum">6</li>
  </ul>
</div>

CSS

#selectDiv {
  position: relative;
  text-align: center;
  width: 8vw;
  height: 100%;
  background-color: #616160;
  color: white;
}

#select {
  position: absolute;
  padding: 0;
  top: 105%;
  left: 0;
  list-style: none;
  display: none;
}

#select>li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #616160;
  border-bottom: 0.2px solid #3cb4e4;
  width: 8vw;
  height: 8vw;
}

#select>li:hover {
  background-color: #FFAA00;
}

JavaScript

$('#selectDiv').click(function() {
    $('#select').toggle();
  });

  $('.liNum').on('click', function(event) {
    event.stopPropagation();
    var txt = $(this).html();
    $('#selectDiv').html(txt);
  });