JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<img src="https://www2.pic-upload.de/img/33579954/test.jpg">
<div id=text>
<h1>Test<font size=10%>.de</font></h1>
<p>danke für eure Hilfe</p>
</div>
</header>

CSS

header {
  border: 2px solid red;
  width: 100%;
  position: relative;
}
header img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text h1, #text p {
  text-align: center;
}