JSFiddle - React, Tailwind, and code Playground

HTML

<div id="layout">
    <main>
        <section>
            <p>Vamos as fotos!
                <br/>
            </p>
            <ul id="dpf">
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto1.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto2.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto3.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto4.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto5.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto6.jpg"></li>
                <li onclick="abrirfoto()"><img src="Backgrounds/Foto7.jpg"></li>
            </ul>
        </section>
    </main>
    <footer>
        Copyright © by:
        <br> Gabriel Rocha e Gustavo Rocha
    </footer>
</div>

CSS

li:active{
	background-color: red;
}