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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="mindmap.js"></script> 

</head>
<body>
  <div class="container">
    <div class="main">
    <ul>
      <li id="show"><a href="#">Rohan</a>
    
        <ul id="categories">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Interests</a></li>
          <li><a href="#">Pages</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Places</a></li>
          <li><a href="#">Variables</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;
}

body {
    background-color: #ccc;
}

.highlight{
  background-color: #ff0000;
}

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();


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

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

    ///gives starting and ending position of li elements
    var start_position = $("#show").position();

    //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;

    $("#show").hover(function () {
        var direction = showing ? "+=" : "-=";
        showing = !showing;

        targets.each(function ( index ) {
            var angle = angle_const * ( index + 0.5 ) * Math.PI / 180;
            var x = Math.cos(angle) * distance;
            var y = Math.sin(angle) * distance;
            $(this).delay( index * 400).animate({
                opacity: "toggle",
                'left': direction + x + 'px',
                'top': direction + y + 'px'
            }, 750);

        });
    });
});