JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="banner">
<nav class="main-navigation main-nav-pos " role="navigation">
	 <li class="learn">
     	<a class="learn" href="http://liveatmonarch.com/bw/cullowhee/learn" >
        <span class="nav-spacer">Learn</span>
        <div class="nav-info">
        	hello, long sentence that goes out of the div for some reason?
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
        </a>
     </li>
     <li class="live">
    	 <a class="live"  href="http://liveatmonarch.com/bw/cullowhee/live" >
         <span class="nav-spacer">Live</span>
         <div class="nav-info">
        	hello again
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
         </a>
     </li>
     <li class="parents">
     	<a class="parents"  href="http://liveatmonarch.com/bw/cullowhee/for-parents" >
        <span class="nav-spacer">For Parents</span>
        <div class="nav-info">
        	hello
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
        </a>
     </li>
     <li class="ask">
    	<a class="ask"  href="http://liveatmonarch.com/bw/cullowhee/ask" >
        <span class="nav-spacer">Ask</span>
        <div class="nav-info">
        	helo
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
        </a>
     </li>
     <div class="nav-bottom"></div>
</nav><!-- #site-navigation -->
    </div><!-- banner -->
 

<div id="page"></div>
                                
                                    <br>
    <br>
        <br>
            <br>
                <br>
                    <br>
                        <br>
                            <br>
                                <br>
                                    <br>
    <br>
        <br>
            <br>
                <br>
                    <br>
                        <br>
                            <br>
                                <br><br>
    <br>
       ...

CSS

/*Added Class for hiding */
.visuallyhidden {  display:none;}

body {background-color: #000;}
.banner {
	height: 300px;
	overflow: hidden;	
	/*z-index: 800;*/
	position: relative;
}
.main-nav-pos  {
		position: absolute;
		bottom: 15px;
		height: 100px;
	}
	.main-nav-fixed  {
		position: fixed;
		top: 0px;
		height: 50px;
	}
	.main-nav-pos a {
		padding: 25px 0 25px 0%;
	}
	.main-nav-fixed a {
		padding: 15px 0 15px 0%;
	}
	.main-navigation  {
		display: inline-block !important;
		text-align: left;
		width: 100%;
		z-index: 1000;
	}
	.main-navigation a {
		display: inline-block;
		text-decoration: none;
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		color: #fff;
		text-transform: uppercase;
		white-space: nowrap;
		border-radius: 10px;
		font-weight:300;
		z-index: 1000;
		position: relative;
		-webkit-box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
		-moz-box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
		box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
	}
	.main-navigation li.learn,
	.main-navigation li.live,
	.main-navigation li.parents {
		margin: 0 1% 0 0;
		width: 24%;
		display: inline-block;
	}
	.main-navigation li.ask {
		margin: 0 0 0 0;
		width: 24%;
		display: inline-block;
		float: right;
	}
	.main-navigation a.learn ,
	.main-navigation a.live,
	.main-navigation a.parents,
	.main-navigation a.ask
	{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.main-navigation a.learn {
		background-color: rgba(255,0,255, 0.85);
	}
	.main-navigation a.live {
		background-color: rgba(0,0,255, 0.85);
	}
	.main-navigation a.parents {
		background-color: rgba(127,0,255, 0.85);
	}
	.main-navigation a.ask {
		background-color: rgba(252,0,75, 0.85);
		margin: 0 0 0 0;
	}
	.nav-spacer {
		padding: 0 0 0 10px;	
	}
	.main-navigation a:hover {
		color: #eee;
	}
.nav-info, .nav-info-fixed {
	width: 100%;
	position: absolute;
	top: 0%;
	background-color: #fff;
	border-radius: 10px;
	z-index: 1000;
	height:0px; 
	overflow: hidden;
	margin: 0 0 10px...

JavaScript

(function($,window,document) { 

    $(function(){
    
        var $main = $('.main-navigation'),
            $navinfo = $main.find('.nav-info'),
            $navinfoFixed  = $main.find('.nav-info-fixed');            

        // Sticky nav
        // ________________________________________
        $(window).on('scroll', doScroll);
        
        function doScroll() {
            var $navbot = $main.find('.nav-bottom'),

                fromtop = ( $('#page').offset().top - $(window).scrollTop()),
                switchValue = 30;
            
            if ( fromtop <= switchValue ) {
                $main.removeClass('main-nav-pos').addClass('main-nav-fixed');
                $navinfo.removeClass('nav-info').addClass('nav-info-fixed');
                $navbot.addClass('visuallyhidden');
            } else {
                $main.removeClass('main-nav-fixed').addClass('main-nav-pos');
                $navinfoFixed.removeClass('nav-info-fixed').addClass('nav-info');
                $navbot.removeClass('visuallyhidden');
            }
        }

        
        $main.find('a').hover(function() { console.log('here');doOver($(this)); });
        
        
        function doOver( el ) {
            if ( $main.hasClass('main-nav-pos') ) {
                
                $navinfo.find('a').hover( 
                    function() { up(el,'open'); }, 
                    function() { up(el, 'close');}
                );
            
            } else {
            
                $navinfoFixed.find('a').hover(
                    function() { down(el,'open'); },
                    function() { down(el,'close'); }
                );
            }
            
        }
        
        function down( el, dir ) {
            console.log('down');
            //set defaults to be open
            var anHeight = "100%",
                anTop = "-105%",
                anDisplay = "block";
            //we are closing so update values
            if (dir === 'close')...