JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenido">
						<ul class="galeria">
							<li><a href="#"><img src="imagen/1.jpg" alt="image01" /></a></li>
							<li><a href="#"><img src="imagen/2.jpg" alt="image02" /></a></li>
							<li><a href="#"><img src="imagen/3.jpg" alt="image03" /></a></li>
							<li><a href="#"><img src="imagen/4.jpg" alt="image04" /></a></li>
							<li><a href="#"><img src="imagen/5.jpg" alt="image05" /></a></li>
							<li><a href="#"><img src="imagen/6.jpg" alt="image06" /></a></li>
							<li><a href="#"><img src="imagen/7.jpg" alt="image07" /></a></li>
							<li><a href="#"><img src="imagen/8.jpg" alt="image08" /></a></li>
						</ul>
					</div>

CSS

.contenido ul li{
	float:left;
}
.contenido ul li a{
	outline:none;
	display:block;
	margin:5px;
}
.contenido ul li a img{
	display:block;
	border:none;
	opacity:0.7;
	-moz-box-shadow:2px 2px 4px #8e8e8e;
	-webkit-box-shadow:2px 2px 4px #8e8e8e;
	box-shadow:2px 2px 4px #8e8e8e;
	/*
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/
}
.contenido ul li a img:hover{
	opacity:1.0;
}