JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainPanel">
            <div class="titlePanel">
                <div class="logoPanel">
                </div>
            </div>
           
            <div class="menuBarPanel">
                Test
            </div>
        </div>
        <div class="southBarPanel">
            <div>
                <p class="center">Impressum</p>
            </div>
        </div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/background.png");
    background-repeat: repeat;
}
 
.mainPanel {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 10px;
}
 
.titlePanel {
    width: 100%;
    height: 100%;
    background: #EDF2F2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#EDF2F2, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#EDF2F2, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#EDF2F2, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#EDF2F2, white); /* Standard syntax */
}
 
.logoPanel {
    background: url("../images/logo_de.svg") no-repeat center center;
    width: 100%;
    height: 100%;
}
 
.menuBarPanel {
    width: 100%;
    height: 30px;
    position: fixed;
    top: 110px;
   
    color:white;
   
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0033cc, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0033cc, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0033cc, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0033cc, blue); /* Standard syntax */
}
 
.southBarPanel {
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
   
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(blue, #0033cc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(blue, #0033cc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(blue, #0033cc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(blue, #0033cc); /* Standard syntax */
       
    color:white;
    display: flex;
    align-items: center;
    justify-content: center
}
 
.center {
    text-align: center;
}