JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<section id="content">

  <div id="workshops">
    <div id="workshops_icon" class="icon">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 235.1 299.4" style="enable-background:new 0 0 235.1 299.4;" xml:space="preserve">
<polygon fill="white" points="0.8,298.5 234.3,298.5 234.3,0.8 0.8,0.8 0.8,298.5 "/>
<polygon id="cross_one"  points="233.6,299.1 117.6,151 1.5,299.1 0.2,298 116.5,149.7 0.2,1.3 1.5,0.3 117.6,148.3 233.6,0.3 
	234.9,1.3 118.6,149.7 234.9,298 "/>
<path d="M235.1,299.4v-1.7V1.7V0h-1.7H1.7H0v1.7v296v1.7h1.7h231.8H235.1L235.1,299.4z M233.5,297.7H1.7V1.7h231.8
	V297.7L233.5,297.7z"/>
</svg>
      <div id="workshops_navigation">
        <div class="link" data-target=".workshops_gallery_one">One</div>
        <div class="link" data-target=".workshops_gallery_two">Two</div>
      </div>

      <div class="popup workshops_gallery_one description">

        <div class="gallery">One: Duis varius, tortor ut porttitor accumsan, dui eros ornare quam, id euismod nisl urna quis ipsum. Etiam sed luctus ligula, sit amet molestie risus. Morbi ornare dui quis diam egestas faucibus. Integer lacinia ornare varius. Curabitur lobortis
          dui eu tincidunt egestas. Vestibulum nibh risus, viverra sed luctus sed, feugiat id augue. Sed rhoncus convallis ligula at rhoncus.</div>

        <div class="gallery">Two: Quisque sit amet libero condimentum eros aliquet finibus. Fusce varius, mauris in finibus euismod, risus mauris feugiat neque, nec hendrerit sem libero ac lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
          Curae; Vivamus quis blandit enim, vel efficitur erat. Fusce sodales,...

CSS

body,
html {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: inherit;
  cursor: default;
}

#content {
  width: 100%;
  height: 100vh;
}

#workshops {
  right: 16vw;
  top: 10vh;
  position: absolute;
  width: 355px;
  height: 0px;
  cursor: pointer;
}

#workshops_navigation {
  font-size: 42px;
  top: 9px;
  margin-left: 16px;
  position: absolute;
  display: none;
  line-height: 100%;
}

.description {
  line-height: 110%;
  position: absolute;
  font-size: 15.5px;
  width: 295px;
  height: auto;
  padding: 7px 11px 8px 11px;
  background-color: black;
  color: white;
  display: none;
  cursor: all-scroll;
}

JavaScript

var workshops = document.querySelector("#workshops");
var cross_one = document.querySelector("#cross_one");
var workshops_navigation = document.querySelector("#workshops_navigation");
workshops.addEventListener("click", function(event) {
  if (cross_one.style.display == "") {
    cross_one.style.display = "none";
    workshops_navigation.style.display = "block";
  } else {
    cross_one.style.display = "";
    workshops_navigation.style.display = "none";
  }
});
document.querySelectorAll(".link").forEach(function(link) {
  link.addEventListener("click", function(event) {
    event.stopPropagation();
  });
});

/* 
  Helper function assigns the element as "top most" element
  relative to other elements
  */
function setToTop(element) {
  var zIndexMax = 0;

  $(".popup, .icon, .link").each(function(i, elem) {
    var zIndex = Number.parseInt($(elem).css("z-index"));

    zIndex = Number.isNaN(zIndex) ? 0 : zIndex;

    zIndexMax = Math.max(zIndexMax, zIndex);
  });

  element.css({
    zIndex: zIndexMax + 1
  });
}

$(function() {
  /* Prevent drag from continuing after mouse leaves document */
  $(document).mouseleave(function() {
    $(document).trigger("mouseup");
  });

  $(".popup, .icon").draggable({
    helper: "original",
    containment: "body",
    start: function(event, ui) {
      /* 
      ui.helper is the element that we're starting to drag 
      */
      setToTop(ui.helper);
    }
  });

  $(".gallery")
    .not(":first")
    .hide();
});

$(".icon, .link").on("mouseup", function() {
  /* Cause clicked button to come to front */
  setToTop($(this));

  if (!$(this).hasClass("ui-draggable-dragging")) {
    var toggleTarget = $(".popup" + $(this).data("target"));

    toggleTarget.toggle();

    if (toggleTarget.is(":visible")) {
      /* Cause newly toggled element to be visible on top */
      setToTop(toggleTarget);

      /* Position of this button */
      const position = $(this).position();

      /* Position target near the button with slight...