JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>

  



<title>arbeit</title>


<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>









<style>



body {
       display: grid;
       display: -ms-grid; 
       
     
       grid-template:
       
        "header header header header" auto
        "nav nav nav nav" auto
        "main main main main" auto
        "main main main main" auto
        "footer footer footer footer" auto; 
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row:  7.5rem 5rem 6.4375rem; 
       -ms-grid-gap: 0.3125rem;
    
} 




header {background-color: #f7eded; padding: 2.5rem; padding-top: 8.5rem;  padding-bottom: 1rem; }


header a {

    font-family: italic;
    color: black;
    text-decoration: none;
	display: inline;
	padding: 0 2rem 0 0.2rem;
	font-size: 1.25rem;
    
} 

  
header li { display: inline-block;  }

header ul{  padding-left: 14.5rem; }        /* beweget computer, News und Bucher   */



.dropdown a { text-decoration: none;  padding: 0.7rem 3rem 0.7rem 0.5rem;}  



 
.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 0.8125rem;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1;
    min-width: 0.9375rem; /* macht größer die Inneren Links */
    box-shadow: 0rem 0.5rem 1rem 0rem rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen...

JavaScript

function layer_show()
	{
		/* Ponemos los atributos de posicion a la capa transparente del fondo */
		$('#layerPreview').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
		
		/* Buscamos la posicion superior de la capa que aparece centrada.
		   La anchura y la posicion centrada se establece en el estilo */
		var posTop=(($(window).height()/2)-(200/2))+$(document).scrollTop();
		if(posTop<0)
			posTop=0;
		$('#layerPreviewContent').attr("style", "top:"+posTop+"px;");
		/* Indicamos que se muestre la capa */
		$('#layerPreviewContent').show(600);
}
	
	/**
	 * Funcion que esconde las capas
	 */
function layer_close()
	{
		$('#layerPreviewContent').hide(300);
		$('#layerPreview').hide();
}