JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <script>
   $('#logo').hide();
$(function() {
    $(document).on("mousewheel", function() {
        if($(document).scrollTop() > 50){
           
			$('.middle').fadeOut();
            
        } else {
            
            
			$('.middle').fadeIn();
        }
        
    });
});
  </script> -->
</head>
<body>
    <div class="sidebar left">dfsfsdf</div>
    <div class="sidebar right">dfsfsdf</div>
    <div id="wrapper">
        <!-- Navigation -->
        <div id="outer">
            <div id="nav">
                <div class="col span_1_of_3">
                    <p>	<a href="#">
					Darrien Tu.
				</a>

                    </p>
                </div>
                <div class="col span_1_of_3">	<a href="mailto:matthew.galloway@gmail.com">
					Email.
				</a>

                </div>
                <div class="col span_1_of_3">	<span>+1 416 783 9813</span>

                </div>
            </div>
        </div>
        <!-- Projects -->
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal1">        
                           
                          <img class="icon" src="work/Maru/img/maru-3.jpg" alt="" /> 
                   
             
					</a>
                <br>
            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal2">Modal №2</a>

            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal3">Modal №3</a>

            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal4">Modal №4</a>

            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal5">Modal №5</a>

            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_1"> <a href="#modal6">Modal №6</a>

            </div>
       ...

CSS

html {

    overflow: auto;

    height: 100%;

}

body {

    overflow: auto;

    height: 100%;

    background-color: #b0c4de;

}

/*
 *  Remodal - v1.0.2
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {

    overflow: hidden;

}

/* Anti FOUC */

.remodal, [data-remodal-id] {

    display: none;

}

/* Necessary styles of the overlay */

.remodal-overlay {

    position: fixed;

    z-index: 9999;

    top: -5000px;

    right: -5000px;

    bottom: -5000px;

    left: -5000px;

    display: none;

}

/* Necessary styles of the wrapper */

.remodal-wrapper {

    position: fixed;

    z-index: 10000;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    display: none;

    overflow: auto;

    text-align: center;

    -webkit-overflow-scrolling: touch;

}

.remodal-wrapper:after {

    display: inline-block;

    margin-left: -0.05em;

}

/* Fix iPad, iPhone glitches */

.remodal-overlay, .remodal-wrapper {

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}

/* Necessary styles of the modal dialog */

.remodal {

    position: relative;

    -webkit-text-size-adjust: 100%;

    -moz-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    text-size-adjust: 100%;

}

.remodal-is-initialized {

    /* Disable Anti-FOUC */

    display:inline-block;

    width: 100%;

    height: 100%;

}

/*
 *  Remodal - v1.0.2
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 * ...

JavaScript

/*
 *  Remodal - v1.0.2
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

! function (a, b) {
    "function" == typeof define && define.amd ? define(["jquery"], function (c) {
        return b(a, c)
    }) : "object" == typeof exports ? b(a, require("jquery")) : b(a, a.jQuery || a.Zepto)
}(this, function (a, b) {
    "use strict";

    function c(a) {
        if (w && "none" === a.css("animation-name") && "none" === a.css("-webkit-animation-name") && "none" === a.css("-moz-animation-name") && "none" === a.css("-o-animation-name") && "none" === a.css("-ms-animation-name")) return 0;
        var b, c, d, e, f = a.css("animation-duration") || a.css("-webkit-animation-duration") || a.css("-moz-animation-duration") || a.css("-o-animation-duration") || a.css("-ms-animation-duration") || "0s",
            g = a.css("animation-delay") || a.css("-webkit-animation-delay") || a.css("-moz-animation-delay") || a.css("-o-animation-delay") || a.css("-ms-animation-delay") || "0s",
            h = a.css("animation-iteration-count") || a.css("-webkit-animation-iteration-count") || a.css("-moz-animation-iteration-count") || a.css("-o-animation-iteration-count") || a.css("-ms-animation-iteration-count") || "1";
        for (f = f.split(", "), g = g.split(", "), h = h.split(", "), e = 0, c = f.length, b = Number.NEGATIVE_INFINITY; c > e; e++) d = parseFloat(f[e]) * parseInt(h[e], 10) + parseFloat(g[e]), d > b && (b = d);
        return d
    }
    function d() {
        if (b(document.body).height() <= b(window).height()) return 0;
        var a, c, d = document.createElement("div"),
            e = document.createElement("div");
        return d.style.visibility = "hidden", d.style.width = "100px", document.body.appendChild(d), a = d.offsetWidth, d.style.overflow = "scroll",...