JSFiddle - React, Tailwind, and code Playground

HTML

<!-- hidden div-->
<div class="hoverKart">
  <div class="container">
    <div class="cardTop">
      <p>
        <!-- JSON DATA (ID) -->
      </p>
    </div>
    <div class="imgHolder">
      <img class="employee" src="img/img.jpg" alt="employee image">
      <img class="eLogo" src="img/logo.jpg" alt="logo">
    </div>
    <div class="eInformation">
      <p class="eName">
        <!-- JSON DATA (NAME) -->
      </p>
      <p class="ePos">
        <!-- JSON DATA (DEPARTMENT) -->
      </p>
      <div class="eDep">
        <img src="img/icons-dep/5.png" alt="department logo">
      </div>
      <p class="eOp">Operations</p>
      <p class="eOp2">
        <!-- JSON DATA (ADDRESS) -->
      </p>
    </div>
  </div>
</div>

<div id="employees"></div>

CSS

.hoverKart {
  position: absolute;
  width: 400px;
  height: 220px;
  border-radius: 25px;
  border: 1px solid #999;
  z-index: 1;
  display: none;
  background: #fff;
}

JavaScript

$(function() {
  var xmlhttp = new XMLHttpRequest();
  var myGlobalJson;
  var url = "https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/189576/1743369/lDhMee0RoA1IO5D/generated.json";
  var employees;
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      employees = JSON.parse(this.responseText);
      myGlobalJson = employees;
      write(employees);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();




  function write(arr) {
    var i;
    var out = '<table>';
    for (i = 0; i < arr.length; i++) {
      out += '<tr>';
      out += '<td class="hoverKartX" user_id="' + arr[i].id + '">' + arr[i].name + '</td>';
      out += '<td>' + arr[i].position + '</td>';
      out += '</tr>';
    }
    out += '</table>';
    document.getElementById('employees').innerHTML = out;
    bindMethods();
  }

  //$(function() {
  function bindMethods() {
    var moveLeft = 20;
    var moveDown = 10;

    $('.hoverKartX').hover(function(e) {
      //$(this).parent().find(".hoverKart").show();
      var currentUserId = parseInt(($(this).attr('user_id')));
      //console.log(myGlobalJson);
      //console.log(typeof  parseInt($(this).attr('user_id')));
      $.each(myGlobalJson, function(i, item) {
        //console.log($(this).attr('user_id'));
        if (item.id === currentUserId) {
          $(".hoverKart .cardTop").html(item.id);
          $(".hoverKart .eName").html(item.name);
          $(".hoverKart .ePos").html(item.position);
          $(".hoverKart .eOp2").html(item.address);
          return false;
        }
      });

      $(".hoverKart").show();
    }, function() {
      $('.hoverKart').hide();
    });

    $('.hoverKartX').mousemove(function(e) {
      $(".hoverKart").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);

      // preventing 'falling' to the right on smaller screen
      if ($(".hoverKart").position()['left'] + $('.hoverKart').width() > $(window).width()) {
       ...