JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mind Map</title>

  <link rel="stylesheet" href="01.css" type="text/css" />

  <script src="jquery.js"></script>
  <script src="mindmap.js"></script> 

</head>
<body>
  <div class="container">
    <form name="input" action="addstuff.php" method="get">
      New Category: <input type="text" name="newcategory" />
      <input type="submit" value="Submit" />
    </form>
    <div class="main">
      <ul>
        <li id="show"><a class="click" href="#">Rohan</a>
          <ul id="categories">
            <li class = "header"><a href="#">Contact</a>
              <ul>
                <li>hello</li>
                <li>goodbye</li>
              </ul>
            </li>
            <li class = "header"><a href="#">Interests</a></li>
            <li class = "header"><a href="#">Pages</a></li>
            <li class = "header"><a href="#">About</a></li>
            <li class = "header"><a href="#">Places</a></li>
            <li class = "header"><a href="#">Resume</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS

#main {
  position: relative;
  width: 700px;
  margin: 0 auto;
}

#categories li {
  top: 0px;
  left: 0px;
  position: absolute;
  text-decoration: none;
}

#show {
  left: 50%;
  position: absolute;
}

ul{
  list-style-type: none;
  text-decoration: none;
}

.container{
  border: 2px solid white;
  height: 500px;
  min-width: 500px;
}

body {
    background-color: #ccc;
}

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;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 7px 7px 7px 7px;
  border: 5px 5px 5px 5px;
  word-spacing:5px;
  vertical-align: 50px;
}

JavaScript

$(document).ready(function() {

    $("ul#categories li").hide();

    if ($('.header').children().length > 0) {

        $('li.header>li').hide();

    }

    //select all targets
    var targets = $("ul#categories>li");

    //number of targets
    var num_targets = targets.length;

    //distance that the targets stray from the #show
    var distance = 240;

    //the angle that the targets stray from the #show
    var angle_const = 180 / num_targets;

    //starting angle for the targets
    var angle_start = angle_const * 0.5;

    var showing = true;

    targets.each(function(i, target_element) {
        var origin = target_element.position();
        console.log(origin.left + "," + origin.top);
    });

    function clickHandler(targets) {

        var direction = showing ? "+=" : "-=";
        showing = !showing;

      var promises = targets.map(function(index) {
            angle = angle_const * (index + 0.5) * Math.PI / 180;
            x = Math.cos(angle) * distance;
            y = Math.sin(angle) * distance;
            return $(this).delay(index * 300).animate({
                opacity: "toggle",
                'left': direction + x + 'px',
                'top': direction + y + 'px'
            }, 750);
        });
        $.when.apply($, promises).then(function(){
            console.log(origin.left + "," + origin.top);
            });
    }

    $("a.click").click(function(e) {

        if (targets.hasClass("active")){
            console.log("false");
        }
        else {
            clickHandler(targets);
            origin = targets.position();

        }
    });

    var pos = $("a.click").position();

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


    $(".header").click(function(e) {

        $(this).addClass("active");

        var headerclicked = $(".header").position();

        var direction = showing ? "-=" : "+=";
        showing = !showing;

        // Make all images (except this) transparent
       ...