JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="close"><i class="arrow"></i></div>
 tests
</div>

CSS

* { margin: 0; padding: 0; }
body {
  height: 2000px;
  color: #fff;
}


.box {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  background: #333;
  width: 100%;
  height: 166px;
  display: flex;
  align-items: center;
  padding: 10px;
  display: none;
  user-select: none;
}



.close {
    position: absolute;
    top: -15px;
    height: 30px;
    width: 30px;
    border-radius: 20px;
    background-color: #444;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    cursor: pointer;
}

.arrow {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  margin-top: -6px;
}

JavaScript

$( ".box" ).slideDown({
      start: function () {
        $(this).css({
          display: "flex"
        })
      }
    });    

  
  var top = 0;
  var divOverlay = document.getElementsByClassName('box')[0];
  var is_clicked = false;
  
  divOverlay.addEventListener('mousedown', function(e){   
    is_clicked = true;
    top = divOverlay.offsetTop - e.clientY
  }, true);
  
  document.addEventListener('mouseup', function(){
    is_clicked = false;
  }, true);

  document.addEventListener('mousemove', function(e){  
    event.preventDefault();
    
    // add a check here so it doesn't allow dragging the container up?
    if(is_clicked){
      divOverlay.style.top  = (e.clientY + top) + 'px';
      
      // if the box reaches 50px down, it should automatically hide it if the user
      //$('.box').slideUp();
    }
  }, true);