JSFiddle - React, Tailwind, and code Playground

HTML

<header class="sticky" id="header">
<nav>Menu</nav>
</header>
<div class="headings">
		<h1>Заголовок</h1>
		<h2>Описание</h2>
    <p><a href="#">телефон</a></p>
</div>
<footer><p>&copy; copyright</p></footer>

CSS

header {
  height:60px;
  text-align:center;
}
.headings {
    position:absolute; 
    top: 50%; 
    height: 140px;
    width: 100%;
    margin-top: -50px;
    color: #fff;
    text-align: center;
}
.headings h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: rgb(102,102,102);
    text-shadow: 0px 6px 4px rgba(0,0,0,0.2);
    margin: 0;
}
.headings h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: rgb(181,181,181);
    margin: 0 0 10px 0;
}
p {
    text-align: center;
}