JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

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">
    <a id="show" href="#">Rohan</a>
  
    <div class="categories">
      <a href="#" id="facebook">Facebook</a>
      <a href="#" id="interests">Interests</a>
      <a href="#" id="pages">Pages</a>
      <a href="#" id="about">About</a>
    </div>
  </div>
</body>
</html>

CSS

#show{
  margin-left: 40%;
}

ul{
    list-style-type: none;
}

.hidden{
  display: none;
}

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() {
    //$(".categories").hide();
    $("#facebook").hide();
    $("#interests").hide();
    $("#pages").hide();
    $("#about").hide();

    var currWidth = $(window).width();
    var currHeight = $(window).height();
    console.log(currHeight);
    console.log(currWidth);

    $("#show").click(function($event) {
        $event.preventDefault();
        var href = $(this).attr("href");

        $("#facebook").animate({
            opacity: "toggle",
            top: currWidth * 1 / 5,
            right: currHeight * 1 / 6
        }, 250, function() {
            $("#interests").animate({
                opacity: "toggle",
                marginLeft: currWidth * 1 / 5,
                right: currHeight * 1 / 6
            }, 250, function() {
                $("#pages").animate({
                    opacity: "toggle",
                    marginLeft: currWidth * 1 / 5,
                    right: currHeight * 1 / 6
                }, 250, function() {
                    $("#about").animate({
                        opacity: "toggle",
                        marginLeft: currWidth * 1 / 5,
                        right: currHeight * 1 / 6
                    }, 250, function() {
                        window.location = href;
                    });
                });

            });
        });
    });
});