JSFiddle - React, Tailwind, and code Playground

HTML

<title>MiniTec Intranet</title>



	<!-- Body -->
<body>


<div class="container">

<div id="wrapper">

	<!-- Header -->

<div id="header">
<header>
   <img src="logo.png" alt="Logo">
</header>
</div>
  
	<!-- Toplevel-Navigation -->
	  
      <div id="top_nav">
        <ul id="navigation_ul">
			<li id="navigation_li"><a class="active" href="#home">Home</a></li>
			<li id="navigation_li"><a href="#Dokumente">Dokumente</a></li>
			<li id="navigation_li"><a href="#zuordnungstabellen">Zuordnungstabellen</a></li>
			<li id="navigation_li"><a href="#vorspann">1. Vorspann</a></li>
			<li id="navigation_li"><a href="#managementsystem">2. Managementsystem</a></li>
			<li id="navigation_li"><a href="#abläufe">3. Abl&aumlufe</a></li>
			<li id="navigation_li"><a href="#anhang">4. Anhang</a></li>
			<li id="navigation_li"><a href="#wiki">Wiki</a></li>
		</ul>
      </div>
	 

	<!-- Linke Navigation -->
	
	  
      <div id="left">
	  
	<!-- Home -->
	  <p></p>
	  
	  <div id="home"> Home/Dokumente </div>
	  <p></p>
	  
	<!-- Linke Navigation -->
	<div id="Navigation_Links">
	
	  <ul id="nav">
	    <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; &Uumlber das IQB </div>
			<ul>
				<li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">&#xbb; Einbauerklaerung_2006-42-EG_Muster</a></li>
				<li><a href="PDF/a.pdf" class="embed-link"> &#xbb; Einbauerklaerung_2006-42-EG_Muster </a></li>
				<li>Partner/Links</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Bildungsstandards  </div>
			<ul>
				<li>Aufgabenbeispiele</li>
				<li>EMSE</li>
			     <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Downloadserver </div>
					<ul>
						<li>Audiofiles</li>
						<li>Videofiles</li>
					</ul>
				</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Arbeitsbereiche</li> </div>
			
	</ul>
	
	
	<!-- search -->
		
<div id="Suche">
     ...

CSS

/*Haupt-Container-----------------------------------*/

div.container {
    width: 100%;
	font: 12px Verdana,Arial;
    clear:both;
    /*border:1px solid silver;*/

}

/*Rahmen -----------------------------------*/

div#wrapper {
  width:auto;			
  height:auto;
 margin-left:6%;
 margin-right:6%;

 
  border:1px solid silver;
	
}


/*Header-----------------------------------*/

header {
    padding: 1em;
    color: white;
    clear: left;
	background-image: url(Hintergrundbild.jpg);
	background-repeat:no-repeat;
    text-align: left;
}


/*Top-Level-Navigation-----------------------------------*/

div#top_nav {
  font: bold 10px Verdana,Arial;
  clear:both;
  background-color:white;
  text-align:right;
  color:#FFFFFF;  
  padding:5px;
  padding-left:0px;
  padding-right:0px;
  
}


div#top_nav a {
   text-decoration: none;
   color:white;
   }
   
   
 #navigation_ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

   #navigation_li {
    float: left;
	}

   #navigation_li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #navigation_li a:hover {
    background-color: #111;
    }

    .active {
    background-color: #FCC330;
    }
	

/*NavigationLinks-----------------------------------*/

div#left {
   float:left;
   min-width:35%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   margin-bottom:5px;
   background-color:#FF8700;			/*orange #FF8700;*/
   overflow:auto;
   box-sizing:border-box; /* Innenabstände werden nicht zur Breite addiert */
   
  /* background-image: linear-gradient(90deg, transparent,#FF8700 45%, #FFFFFF 100%);*/
  
  
}

	
/*Überschrift Home-----------------------------------*/

	#home
	{
		
		font-size: 20px;
		vertical-align: bottom;
		border-bottom: 2px solid #F6F1F1;
		padding-bottom:6px;
		
	}
	
/*Linke Navigation...

JavaScript

$("#nav li:has(ul)").children("ul").hide();
$("#nav li:has(ul)").find("div").click(function() {   
   var parent = $(this).parent()
   parent.siblings().find("ul.showSubnav").removeClass("showSubnav");
   parent.find("ul:first").toggleClass("showSubnav");
   parent.siblings().find("div.ordnerOffen").removeClass("ordnerOffen");
   parent.find("div:first").toggleClass("ordnerOffen");
 });