JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Nav">
            <nav>
                <ul class="navigation fade-in2">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#shop">Shop</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class="logo"><a href="#home">MAG</a></div>

            <div class="background"><img class="beauty" src="http://www.tony77.com/whois/whois.jpg"></div>
    <div class="header">
        <h1 class="headerName fade-in">DESIGN | DEVELOP | BRAND</h1>
        <h4 class="service fade-in3"><a href="#portfolio">VIEW PORTFOLIO</a></h4>
        <h4 class="service fade-in3"><a href="#services">VIEW SERVICES</a></h4>
    </div>
    <!--<div class="mainbody"><p>safsdaf</p></div>-->

CSS

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

* {
    padding: 0;
    margin: 0;
}

li {
    display: inline;
    font-size: 15px;
    font-family: verdana;

}

nav {
    width: 100%;
    text-align: right;
    background-color: #222222;
    padding: 0;
    margin: 0px;
    line-height: 47px;
    position: fixed;
    z-index: 100;
}


.ak{
    width: 90px;
    height: 55px;
    z-index: 101;
    position: fixed;
    background: transparent;
    color: transparent;
    background-color: transparent;
}


.Nav a{
    text-decoration: none;
    padding: 15px;
}

.Nav a:link{
    color: #A7A7A7;

}

.Nav a:visited{
    color: #A7A7A7;

}

.Nav a:hover{

    color: #DBDBDB;
    transition: all 0.3s ease-out 0s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

.header {

    background-color: rgba(0,0,0, 0.25);
    width: 100%;
    height: 626px;
    text-align: center;
    position: fixed;
    z-index: 10;
}


.background {
    position: fixed;
    z-index: 8;
    width:100%;



}

.beauty {
    width: 100%;
    height: 626px;

}


.headerName {
    font-size: 2.5em;
    text-align: center;
    color: #D3D3D3;
    padding: 180px;
    padding-bottom: 50px;
    margin: 0px;
    letter-spacing: 4px;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
}



.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

   ...