JSFiddle - React, Tailwind, and code Playground

by raphaelwilker

HTML

<nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- Corpo -->
<main>
    <ul class="produtos">
        <li>
            <h2>Cabelo</h2>
            <img src="imagens/produtos/cabelo.jpg">
            <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
            <p class="produto-preço">R$ 25</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="imagens/produtos/barba.jpg">
            <p class="produto-descricao">Corte e desenho profissional de barba</p>
            <p class="produto-preço">R$ 18</p>
        </li>
        <li>
            <h2>Cabelo + Barba</h2>
            <img src="imagens/produtos/cabelo+barba.jpg">
            <p class="produto-descricao">Pacote completo de cabelo e barba</p>
            <p class="produto-preço">R$ 35</p>
        </li>
    </ul>
</main>

<!-- Rodapé -->
<footer>
    <img src="imagens/produtos/logo-branco.png">
    <p class="copyright">&copy; Copyright Barbearia Alura 2021</p>
</footer>

CSS

footer {
   text-align: center; 
   background: url("https://www.significadofacil.com/wp-content/uploads/2019/07/background-1000x500.jpg");
   padding: 40px 0;
   color: #FFF;
}