JSFiddle - React, Tailwind, and code Playground

HTML

<div class="welcome-area">
        <div class=" pic_background">
          <header>
              <div class="main-header">
                <nav>
                  <a href="aboutme">about me</a>
                </nav>
              </div>
          </header>
       </div>
</div>
<div class="gradient_background"></div>

CSS

.welcome-area{
  position:relative;
  margin: 0;
  width: 100%;
  height: 700px;
  text-align: center;
  overflow:hidden;
   position: relative;
  z-index: 45;
}

.pic_background{
  top: 0;
  left: 0;
  position:absolute;
  z-index: 1;
  width: 100%;
  height: 700px;
  background-color: grey;
  background-size: cover;
  background-position: 0 -150px;
  background-repeat: no-repeat;
}

.main-header{
  display: block;
  text-align: center;
  width: 100%;
  height: 100px;
  color: white;
  background-color: transparent;
  position:absolute;
  z-index: 7;
}

.gradient_background{
  width: 100%;
  height: 700px;
  top: 0;
  background-image: linear-gradient(to bottom right, #002c72 , #0058e6);
  animation-name: gradient-background;
  animation-duration: 4s;
  animation-fill-mode: both;
  position: absolute;
  z-index: 2;
}

.main-header a{
 
}