JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Portfolio Helge Meiering</title>
    <link href="css/normalize.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>
<body>
<div class="container-fluid">


    <div class="row">
        <div class="col col-md-10 col-xs-12 col-sm-12 col-lg-12 navigation ">
            <header>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                    data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                        </div>
                        <div id="navbar" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a class="aboutLink">About me</a></li>
                 ...

CSS

.item {
    position: relative
}
.FUSEE {
    background-color: #338073;
    display: inline-block;
    cursor: pointer;
    height: 50%
}
.FUSEE_Detail {
    background: #264d46;
    background: -moz-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #264d46), color-stop(79%, #7ba099), color-stop(79%, #7ba099));
    background: -webkit-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
    background: -o-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
    background: -ms-linear-gradient(top, #264d46 25%, #7ba099 79%, #7ba099 79%);
    background: linear-gradient(to bottom, #264d46 25%, #7ba099 79%, #7ba099 79%);
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#264d46', endColorstr='#7ba099', GradientType=0);
    box-sizing: border-box;
    width: 0;
    height: 50%;
    left: 0;
    z-index: 1;
    display: none;
    cursor: default;
    position: absolute
}
.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, .8965104211936, 0, 0);
    -webkit-transform: matrix(1, 0, 0, .8965104211936, 0, 0);
    -ms-transform: matrix(1, 0, 0, .8965104211936, 0, 0);
    position: absolute;
    right: 25px;
    top: 0;
    width: 17px;
    height: 24px;
    z-index: 46
}
.FUSEE_Detail .FUSEE_content {
    height: 50%;
    text-align: left!important;
    font-size: 3rem;
    font-family: "Arial";
    color: #bad5d0;
    line-height: 1.442;
    background-color: red;
    position: absolute;
    z-index: 46
}
.FUSEE_Detail .FUSEE_headline {
    background-color: gold;
    height: 50%;
    text-align: center!important;
    font-size: 3rem;
    font-family: "Arial";
    color: #bad5d0;
    line-height: 1.442;
    position: absolute;
    z-index: 46
}
.FUSEE_Detail .FUSEE_additive {
    background-color: aqua;
    height: 50%;
 ...

JavaScript

$(document).ready(function () {
    var gwtDetailPage = $(".GWT_Detail");

    $(".GWT").click(function (event) {
        $(".GWT").css("z-Index",51);
        gwtDetailPage.animate({width: "100%", height: "100%"}, 500)
            .show()
            .addClass("active")
            .addClass("hidden-xs");
        $(".GWT").css("z-Index",51);


    });


    $(".GWT_Close").click(function (event) {
        $(".GWT_Detail").animate({width: "0px", height: "0px"}, 500, function () {
            $(".GWT_Detail").hide();
        });
        $(".GWT_Detail").removeClass("active");
        $(".GWT").css("z-Index",0);


    });

});