JSFiddle - React, Tailwind, and code Playground

HTML

<section class="centro">
<header class="cabecalho">
  <div class="cabecalho-container">
    <div class="cabecalho-top">
      <div>
        <img src="https://i.ibb.co/X4zR0ss/game-console.png" alt="logo da pagina" class="logo">
      </div>
     </div>
    </div>
  </header>
  
  <!--conteudo da pagina-->
  
  <footer class="rodape">
<p> rodape </p>
</footer>

</section>

CSS

.rodape{
  background-color: #000;
  background-image: url('https://i.ibb.co/wd9ckd1/footer.gif');
  background-size: 30%;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding: 50px;
  height: auto;
  margin: 0;
  width:100%;
}

.cabecalho{
  padding: 0;
  background-image: url('https://i.ibb.co/1sNJnpY/background-header.jpg');
}

.logo{
  width: 56px;
  height: 56px;
  float:left;
}