JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <header>
            <img id="bg-cabecalho" src="img/bg.cabeçalho.png"/>
        </header>
        <nav>
            <img id="bg-menu" src="img/bg.menu.png"/>
            <ul>
                <li><a href="#">|Home|</a></li>
                <li><a href="#">Portifólio|</a></li>
                <li><a href="#">Contato|</a></li>
                <li><a href="#">Sobre mim|</a></li>
            </ul>
        </nav>
        <div>
            <img id="baner" src="img/baner.png"/>
        </div>
        <div id="conteudo">   
            <article>
            </article>
        </div>  
        <footer>
            <img id="bg-rodape" src="img/bg.rodape.png"/>
        </footer>
    </body>

CSS

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}
 
#bg-cabecalho,#bg-menu,nav ul li{
    position: absolute;
}
 
#conteudo{
    width: 1200px;
    height: 1200px;
    margin: 0 auto;
    border: 1px solid black;
}
 
#bg-cabecalho{
    width: 100%;
    height: 172px;
    z-index: 1;
}
 
#bg-menu{
    width: 870px;
    height: 78px;
    border-radius: 10px;
    top: 135px;
    left: 220px;
    z-index: 2;
}
 
#bg-rodape{
    width: 100%;
    height: 49px;
    margin-bottom: -10px;
}
 
#baner{
    width: 100%;
    height: 254px;
    margin-top: 350px;
     
}
 
nav ul li{
    width: 387px;
    height: 40px;
    display: inline;
    top: 165px;
    left: 250px;
    z-index: 3;
    position: relative!important;
}