JSFiddle - React, Tailwind, and code Playground

HTML

<div id="galeria"> <!--Inicio galeria de trabajos web-->
    
    <ul>
        <!--  WEB 1-->
        <li>
            <div class="mini"> <!--Imagen miniatura que abre el panel--></div>
            <div class="pic"><!--Panel que aparece-->1</div>
        </li>
   
        <!--  WEB 2-->
        <li>
            <div class="mini"> <!--Imagen miniatura que abre el panel--></div>
            <div class="pic"><!--Panel que aparece-->2</div>
        </li>

        <!--  WEB 3-->
        <li>
            <div class="mini"> <!--Imagen miniatura que abre el panel--></div>
            <div class="pic"><!--Panel que aparece-->3</div> 
        </li>
    </ul>
    
</div>

CSS

body{
    background:#FFC;}

/*    
    ******************************
    GALERIAS
    *******************************/
    
    
    #galeria { /* este es el div que contiene la galería */
  background:;
  border: 0px solid #505961;
  height: 600px;
  position: relative;
  width: 600px;
  margin: 30px auto;
  overflow: visible;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#galeria ul { /* la lista */
  margin: 0;
  padding: 0;
  text-align: center;
}
#galeria ul li { /* cada item de la lista */
  display: list-item;
  list-style: none;
  padding: 5px 5px 0px 5px;
  vertical-align: middle;
  background: #fff;
   border: 1px solid #333;
   width: 150px;
   height: 150px;
   cursor: pointer;
   font-size:11px;
}
#galeria ul li .pic { /* la imagen normal */
  background-color: rgba(0, 0, 0, 0.6);
  border: 0px solid #000;
  left: 161px;
  padding: 5px;
  position: absolute;
  top: 0px;
  width: 450px;
   height: 461px;
  visibility:hidden;
  cursor: auto;
  color:#FFF;

    filter:alpha(opacity=60);
    border-radius: 0px 5px 5px 0px;
}
#galeria ul li .mini {
    width:150px;
    height:150px;
    position:relative;
    color:#FFF;}
#galeria ul li span{
    background: #333;
    width:160px;
    height:30px;
    position: absolute;
    margin-left:-5px;
    margin-top:-30px;
    display: block;
    opacity: 0.6;
    filter:alpha(opacity=60);
    color:#FFF;
    }
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
  cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */ 
  /* visibility: visible; */
}
  
#galeria .referencia {
    text-align: justify;}

JavaScript

$(".mini").click( function () {
          
    $('#galeria .pic').css({"visibility":"hidden", "color":"red"});
    $(this).next().css({"visibility":"visible", "color":"blue"});
        
});

$('#galeria li:first-child .pic').css({"visibility":"visible", "color":"blue"});