JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<style>
	div.selectBox {
	  position: relative;
	  display: inline-block;
	  cursor: default;
	  text-align: left;
	  line-height: 30px;
	  clear: both;
	  color: #888;
	}

	span.selected {
	  padding: 0 10px;
	  border: 1px solid #ccc;
	  border-right: none;
	  border-top-left-radius: 5px;
	  border-bottom-left-radius: 5px;
	  background: #f6f6f6;
	  overflow: hidden;
	}
.wVid{
  width: 30px;
	  border: 1px solid #ccc;
	  border-left: 0;
	  border-top-right-radius: 5px;
	  border-bottom-right-radius: 5px;
	  text-align: center;
	  font-size: 20px;
	  user-select: none;
	  background: #f6f6f6;
    position: relative;
	  float: left;
	  height: 30px;
	  z-index: 1;
}
	span.selectArrow {
	  width: 30px;
	  border: 1px solid #ccc;
	  border-left: 0;
	  
	  text-align: center;
	  font-size: 20px;
	  user-select: none;
	  background: #f6f6f6;
	}

	span.selectArrow,
	span.selected {
	  position: relative;
	  float: left;
	  height: 30px;
	  z-index: 1;
    cursor:pointer;
	}

	div.selectOptions {
	  position: absolute;
	  top: 28px;
	  left: 0;
	  width: calc(100% - 32.8px);
	  border: 1px solid #ccc;
	  border-bottom-right-radius: 5px;
	  border-bottom-left-radius: 5px;
	  overflow: hidden;
	  background: #f6f6f6;
	  padding-top: 2px;
	  display: none;
	}

	span.selectOption {
	  display: block;
	  width: 80%;
	  line-height: 20px;
	  padding: 5px 10%;
    cursor:pointer;
	}

	span.selectOption:hover {
	  color: #f6f6f6;
	  background: #4096ee;
	}

</style>

<div>
  <div class='selectBox'>
    <span class='selected'></span>
    <span class='selectArrow'>&#9660</span>
    <div class="selectOptions">
      <span class="selectOption" value="Option 1">Option 1</span>
      <span class="selectOption" value="Option 2">Option 2</span>
      <span class="selectOption" value="Option 3">Option 3</span>
    </div><span class='wVid'>X</span>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  enableSelectBoxes();
});

function...

CSS

div.selectBox {
	  position: relative;
	  display: inline-block;
	  cursor: default;
	  text-align: left;
	  line-height: 30px;
	  clear: both;
	  color: #888;
	}

	span.selected {
	  padding: 0 10px;
	  border: 1px solid #ccc;
	  border-right: none;
	  border-top-left-radius: 5px;
	  border-bottom-left-radius: 5px;
	  background: #f6f6f6;
	  overflow: hidden;
	}
.wVid{
  width: 30px;
	  border: 1px solid #ccc;
	  border-left: 0;
	  border-top-right-radius: 5px;
	  border-bottom-right-radius: 5px;
	  text-align: center;
	  font-size: 20px;
	  user-select: none;
	  background: #f6f6f6;
    position: relative;
	  float: left;
	  height: 30px;
	  z-index: 1;
}
	span.selectArrow {
	  width: 30px;
	  border: 1px solid #ccc;
	  border-left: 0;
	  
	  text-align: center;
	  font-size: 20px;
	  user-select: none;
	  background: #f6f6f6;
	}

	span.selectArrow,
	span.selected {
	  position: relative;
	  float: left;
	  height: 30px;
	  z-index: 1;
    cursor:pointer;
	}

	div.selectOptions {
	  position: absolute;
	  top: 28px;
	  left: 0;
	  width: calc(100% - 32.8px);
	  border: 1px solid #ccc;
	  border-bottom-right-radius: 5px;
	  border-bottom-left-radius: 5px;
	  overflow: hidden;
	  background: #f6f6f6;
	  padding-top: 2px;
	  display: none;
	}

	span.selectOption {
	  display: block;
	  width: 80%;
	  line-height: 20px;
	  padding: 5px 10%;
    cursor:pointer;
	}

	span.selectOption:hover {
	  color: #f6f6f6;
	  background: #4096ee;
	}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  enableSelectBoxes();
});

function enableSelectBoxes() {
  var selectBoxes = document.querySelectorAll('div.selectBox');

  selectBoxes.forEach(function(selectBox) {
    var firstOption = selectBox.querySelector('div.selectOptions > span.selectOption:first-child');
    var selectedSpan = selectBox.querySelector('span.selected');
    var selectArrow = selectBox.querySelector('span.selectArrow');

    // Set the displayed value and the value attribute to the first option's value
    selectedSpan.innerHTML = firstOption.innerHTML;
    selectBox.setAttribute('value', firstOption.getAttribute('value'));

    // Event listener for clicking on the box to show/hide options
    selectedSpan.addEventListener('click', toggleOptions);
    if (selectArrow) {
      selectArrow.addEventListener('click', toggleOptions);
    }

    // Function to toggle the display of options
    function toggleOptions() {
      var optionsDiv = selectBox.querySelector('div.selectOptions');
      if (optionsDiv.style.display === 'block') {
        optionsDiv.style.display = 'none';
      } else {
        optionsDiv.style.display = 'block';
      }
    }

    // Setup click event for all options within this selectBox
    var options = selectBox.querySelectorAll('span.selectOption');
    options.forEach(function(option) {
      option.addEventListener('click', function() {
        var optionsDiv = this.parentNode;
        optionsDiv.style.display = 'none'; // Hide options list
        selectBox.setAttribute('value', this.getAttribute('value')); // Set the value
        selectBox.querySelector('span.selected').innerHTML = this.innerHTML; // Update the displayed value
      });
    });
  });
}