JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='custom-select'>
   <div class="selected">
       <span class='text'>Select</span>
   </div>
   <div class='select-box'>
       <ul class='select-list'>
          <li data-row='0' data-value=''>
             Select
          </li>
          <li data-row='1' data-value='BUET'>
               Bangladesh University of Engineering and Technology
          </li>
          <li data-row='2' data-value='MBSTU'>
               Mawlana Bhashani Science and Technology University
          </li>
       </ul>
   </div>
</div>

CSS

div.custom-select 
{
  height: 40px;
  width: 400px;
  position: relative;
  background-color: #F2F2F2;
  border: 1px solid #E4E4E4;
}

div.selected
{
  width: inherit;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
}

div.selected > .text
{
  padding: 10px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.select-box
{
  display: none;
  width: 100%;
  z-index: 10029;
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 8px 20px #000000;
  box-shadow: 0 8px 20px rgba(0,0,0,.35)
}

div.select-box.active
{
  display: block;
}

div.select-box.drop-up
{
  top: auto;
  bottom: 100%;
}

ul.select-list
{
  margin: 0;
  padding: 10px;
  list-style-type: none;
}

ul.select-list li
{
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ul.select-list li:hover,
ul.select-list li.active
{
  background-color: #999999;
}

JavaScript

$(document).ready(function (){
    $("div.selected").on("click", function () {
        var hasActiveClass = $("div.select-box").hasClass("active");

        if (hasActiveClass === false) {
            var windowHeight = $(window).outerHeight();
            var dropdownPosition = $(this).offset().top;
            var dropdownHeight = 95; // dropdown height

            if (dropdownPosition + dropdownHeight + 50 > windowHeight) {
                $("div.select-box").addClass("drop-up");
            }
            else {
                $("div.select-box").removeClass("drop-up");
            }

            var currentUniversity = $(this).find('text').text().trim();

            $.each($("ul.select-list li"), function () {
                var university = $(this).text().trim();
                if (university === currentUniversity)
                    $(this).addClass("active");
                else
                    $(this).removeClass("active");
            });
        }

        $("div.select-box").toggleClass("active");
    });

    $("ul.select-list li").on("click", function () {
        var university = $(this).html();
        $("span.text").html(university);
        $("div.select-box").removeClass("active");
    });

    $("ul.select-list li").hover(function () {
        $("ul.select-list li").removeClass("active");
    });

    $(document).click(function (event) {
       if ($(event.target).closest("div.custom-select").length < 1) {
            $("div.select-box").removeClass("active");
        }
    });

});