JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-wrap">
    <div class="image-gallery">
        <div class="big-image">           
          <a id="merge" href="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG"><img style="max-height: 400px" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a>
          <a id="fullbody"  href="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc"><img style="max-height: 400px" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
          <a id="closeup" href="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc"><img style="max-height: 400px" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
          <img style="max-height: 400px" id="default" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" />
        </div>
  <ul id="ffs">
    <li>
      <a href="#merge"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a></li>
    <li>
      <a href="#fullbody"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
    </li>
    <li>
       <a href="#closeup"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
    </li>
        </ul>
    
    
    </div>
  
</div>

CSS

.image-gallery{
  width:500px !important;
  height:500px !important;
  background-color:#666666;
  padding:5px;
  border:solid 1px #4c4c4c;
    -webkit-box-shadow: 5px 5px 5px 1px rgba(51,51,51,1);
    -moz-box-shadow: 5px 5px 10px 1px rgba(51,51,51,1);
    box-shadow: 5px 5px 10px 1px rgba(51,51,51,1);
}
.image-gallery .big-image{
  width:auto !important;
  height:400px !important;
  border:none;
  border-color: none;
  padding:10px;
  margin:0 auto;
  background-color:white;
}
.image-gallery .big-image a img{
  display:none;
  margin:0 auto;
}
/*Selected image display*/
.image-gallery .big-image a:target img{display:block;}
/*on select image dusplay none the default image*/
.image-gallery .big-image a:target ~ img#default{display:none; width:1px;}
/*Shoe Default Image in first load*/
.image-gallery .big-image img#default{display:block;}

.image-gallery ul{margin-top:5px;margin-left: 33%;}
.image-gallery li{float:left;
  background-color:rgba(255,255,255,0.5);margin-right:3px;}
.image-gallery li:hover{
  background-color:rgba(255,255,255,0.8);
}


/*other styles*/
.title{font-size:20px;font-weight:bold;color:#633317;text-align:center;margin-bottom:15px;}
.by{clear:both;display:block;font-size:12px;text-align:right;color:#633317;padding-top:5px;}
.example2{font-size:16px; color:red; font-weight:bold;}
/*reset CSS*/
*{font-family:arial;}
ul,li{list-style:none;margin:0;padding:0;}

#image-wrap {
    width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}