JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Content1">
<a href="cesar.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="cesar.jpg" class="imagen_sk8"></a>
<a href="facu1.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="facu1.jpg" class="imagen_sk8"></a>
<a href="facu2.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="facu2.jpg" class="imagen_sk8"></a>
<a href="mini.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="mini.jpg" class="imagen_sk8"></a>
</div>
<div id="Content2">
<a href="nigga.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="nigga.jpg" class="imagen_sk8"></a>
<a href="pa.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="pa.jpg" class="imagen_sk8"></a>
<a href="skatefacu.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="skatefacu.jpg" class="imagen_sk8"></a>
<a href="skaters.jpg" data-lightbox="grupo1" data-title="Siempre el mejor chocolate"><img class="example-image"><img src="skaters.jpg" class="imagen_sk8"></a>
</div>
CSS
.imagen_sk8 {
height: 80%;
}
#Content1 {
width: 100%;
height: 150px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
}
#Content1 a:hover{
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.5);
}
#Content1 img{}
#Content2 {
width: 100%;
height: 150px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
}
#Content2 a:hover{
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.5);
}
#Content2 img{}