JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="content-head"></div>
    <div id="content-mid">Hier steh der Text</div>
    <div id="content-foot"></div>
</div>

CSS

#content {
    position:absolute;
    top:300px;
    right:0;
    left:50%;
    bottom:0;
    margin-left:-400px;
    background-color:blue;
}
#content-head {
    position:absolute;
    background-color: green;
    background-image:url(up.png);
    height:25px;
    width:800px;
}
#content-mid {
    top:25px;
    /*margin-bottom:25px;*/
    position:absolute;
    background-image:url(mid.png);
    width:800px;
}
#content-foot {
    position:absolute;
    bottom:0;
    background: red;
    background-image:url(down.png);
    width:800px;
    height:25px;
}