JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<nav>
<div class='container'>
<div class='container_l'>links</div>
<div class='container_m'>mitte</div>
<div class='container_r'>rechts</div>
<footer>Bla bla </footer>
</div>
</nav>

CSS

nav
{

	background: #F2F2F2;
    vertical-align: middle;
	height: 85px;
	padding: 15px;
}

.container {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-gap: 5px;
  justify-items: start;
}
.container_l {
   grid-row: 1;
   grid-column: 1 / 2;
   align-self: start;
   justify-self: start;
    background:#D2FFD2;
	width:100%;
height:100%;
}

.container_m {
   grid-row: 1;
   grid-column: 2 / 3; 
   margin-left: 50px;
   font-size: 1.5em;
    FONT-FAMILY:Verdana, Arial;
	color:#737373;
    Font-weight:bold;
	letter-spacing:0.5em;
    text-align:justify;
    text-shadow: 4px 4px 4px #EEEEEE;
		margin-top: 5px;
		margin-left: 20px;
    background:#D2E9FF;
	width:100%;
height:100%;


}

.container_r {
   grid-row: 1;
   grid-column: 3 / 4;
   justify-self: end;
    background:#FFFFAE;
	width:100%;
	height:100%;

}

.container footer {
   grid-row: 2;
   grid-column: 1 / 4;
    background:#FFFF00;
	width:100%
}