JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
		<div class="menu">
			menu
		</div>
		<div class="header-container clearfix">
      <div class="headline">
      			<span>das ist mein blog</span>
			      <span>this is the underline</span>
      </div>
		</div>
	</div>
	<div class="blog">
		y
	</div>
	<div class="footer">
		x
	</div>

CSS

body {
			min-width:300px;
		}
	
		.header {
			background-color:pink;
			width:100%;
			height:400px;
		}
	
		.menu {
			background-color: red;
		}
		
		.header-container {
			color:white;
			background-color:gray;
			height:100%;
			max-width:400px;
			
			margin:auto;
			top:0;
			bottom:0;
			padding-right:36px;
			padding-left:36px;
			padding-top:54px;
			padding-bottom:54px;
		}
    
    .buffer {
      height:100px;
    }
		
		.clearfix {
			clear:both;
		}