JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>mindmap plugin</title>

  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>

  <link rel="stylesheet" media="screen" type="text/css" href="css.css" />
</head>
<body>
<div class="main">
  <ul>
    <li id="show"><a class="click" href="#">Rohan</a></li>
  </ul>
</div>
width: <span id="widthSpan"></span> px
<br />
height: <span id="heightSpan"></span> px
<br>
<h1>WE ARE MEASURING THE WIDTH OF THE BROWSER SIZE. YOU MAY HAVE TO MODIFY FOR A DIV</h1>
</body>
</html>

CSS

body {
  background-color:#999;
}

ul {
  list-style-type: none;
}

.main {
  border : 3px solid #fff;
  text-align: center;
}

#show {
  border : 3px solid #ff0000;
  width: 50%;
  margin: auto;
}

a {
  color:#fff;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  background:#3399ff;
  border: 2px solid white;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  padding: 7px 7px 7px 7px;
  word-spacing:5px;
}

JavaScript

$(document).ready(function(){

  $('#heightSpan').html($(window).height());
  $('#widthSpan').html($(window).width());

  $(window).on('resize', function(){
    $('#heightSpan').html($(window).height());
    $('#widthSpan').html($(window).width());

    var top = Math.round($(window).height()/2);
    var left = Math.round($(window).width()/2);

    console.log(top + "," + left);

    $(".main").css("top", -top);
    $(".main").css("left", left);

  });

  $("a.click").click(function () {
    console.log("works");
  });


});