JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="main-header"></div>
  	<div class="row-header"></div>
    <nav class="main-navigation">
  	    <ul>
  				<li>Главная</li>
  				<li>Новости</li>
  				<li>Донорство</li>
  		        <li>Лечение</li>
        </ul>
    </nav>
</header>

CSS

html, body { background: #885043; }
html, body, .main-navigation ul { margin: 0; padding: 0; }
.main-header, .row-header, .main-navigation { position: relative; margin: 0 auto; width: 56%; }
.main-header { top: 100px; height: 500px; z-index: 1; background: #4c201f; }
.row-header { top: -500px; height: 100px; z-index: 3; background: url(https://s8.hostingkartinok.com/uploads/images/2018/11/b3333aedbbd50cd622ce9b4d6eae52b6.png); }
.main-navigation { top: -510px; z-index: 2; }
.main-navigation ul { text-align: center; list-style: none; }
.main-navigation li { display: inline-block; padding: 1px; background: #008000; }