JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="main.css" type="text/css">
    <script src="jquery-2.1.4.js"></script>
    <script src="scripts/script.js" type="text/javascript"></script>
    <script src="scripts/aboutme.js" type="text/javascript"></script>
</head>
<body>
<header>
    <ul>
        <li class="aboutMenu">
            Über Mich
        </li>
        <li class="projekteMenu">
            Projekte
        </li>
        <li class="contactMenu">
            Kontakt
        </li>
    </ul>
</header>
<div class="main">
    <div class="background">




        <div class="projekte">
            <div class="FUSEE_Detail"><span class="FUSEE_Close close">X</span></div>
            <div class="FUSEE">
                <img src="Image/FuseeLogo375.png" class="FUSEE_Logo">
            </div>


            <div class="GE"><img src="Image/stp_little.png"> </div>
            <div class="GWT"><img src="Image/GWT_Logo.png" class="GWT_Logo"></div>
            <div class="HFUni"><img src="Image/hfu_little.png"></div>
        </div>

        <div class="aboutme">
            <div class="image_me"></div>
            <div class="info_me"></div>
        </div>

        <div class="contact">
            <form></form>
        </div>

    </div>
</div>

</body>
</html>

CSS

.close {
  cursor: pointer;
}
.FUSEE {
  background-color: #338073;
  box-sizing: border-box;
  left: 120px;
  top: 30px;
  width: 518px;
  height: 324px;
  z-index: 10;
  margin: 30px 0 0 200px;
}
.FUSEE .FUSEE_Logo {
  margin: 12.5%;
}
.FUSEE_Detail {
  background: #264d46;
  /* Old browsers */

  background: -moz-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #264d46), color-stop(79%, #7ba099), color-stop(79%, #7ba099));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
  /* IE10+ */

  background: linear-gradient(to bottom, #264d46 25%, #7ba099 79%, #7ba099 79%);
  /* W3C */

  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#264d46', endColorstr='#7ba099', GradientType=0);
  /* IE6-9 */

  box-sizing: border-box;
  position: absolute;
  top: 30px;
  width: 120px;
  height: 324px;
  z-index: 1;
  display: none;
  cursor: default;
  margin: 0 0 0 200px;
}
.FUSEE_Detail .FUSEE_Close {
  font-size: 43px;
  font-family: "Arial";
  color: #bad5d0;
  line-height: 1.442;
  text-align: left;
  -moz-transform: matrix(1, 0, 0, 0.8965104211936, 0, 0);
  -webkit-transform: matrix(1, 0, 0, 0.8965104211936, 0, 0);
  -ms-transform: matrix(1, 0, 0, 0.8965104211936, 0, 0);
  position: absolute;
  right: 25px;
  top: 0px;
  width: 17px;
  height: 24px;
  z-index: 46;
}
.GWT {
  background-color: red;
  box-sizing: border-box;
  left: 638px;
  width: 520px;
  height: 324px;
  margin: -700px 0 0 718px;
}
.GWT .GWT_Logo {
  display: block;
  margin: 10% auto;
}
.GE {
  background-color: yellow;
  box-sizing: border-box;
  width: 518px;
  height: 324px;
  margin: 0 0 0 200px;
}
.HFUni {
 ...

JavaScript

$(document).ready(function () {
    $(".FUSEE").click(function (event) {
        $(".FUSEE_Detail").show();
        $(".FUSEE_Detail").animate({width: "1040px", height: "652px"}, 500);
        $(".FUSEE_Detail").addClass("active");

        //$(".FUSEE_Detail").animate({height: "652px"},500);


    });

    $(".FUSEE_Close").click(function (event) {
        $(".FUSEE_Detail").animate({width: "0px", height: "0px"}, 500, function () {
            $(".FUSEE_Detail").hide();
        });
        $(".FUSEE_Detail").removeClass("active");

        // $(".FUSEE_Detail").hide();
        //$(".FUSEE_Detail").animate({height: "652px"},500);


    });
    
        $(".aboutMenu").click(function (event) {
        $(".image_me").show();
        $(".image_me").animate({left: "120px"}, 500);
        $(".image_me").addClass("active");
        //$(".FUSEE_Detail").animate({height: "652px"},500);
        $(".info_me").show();
        $(".info_me").animate({right: "547px" }, 500);
        $(".info_me").addClass("active");
        //$(".FUSEE_Detail").animate({height: "652px"},500);




    });

    $("li.projekteMenu").click(function (event) {
        $(".image_me ").animate({left: "-718px"}, 500, function(){
        $(".image_me").hide();

        });
        $(".image_me").removeClass("active");
        //$(".FUSEE_Detail").animate({height: "652px"},500);

        $(".info_me").animate({right: "-518px" }, 500, function(){
            $(".info_me").hide();
        });
        $(".info_me").removeClass("active");
        //$(".FUSEE_Detail").animate({height: "652px"},500);




    });

});