JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<h1>Replacement Gallery</h1> 
<p><img id="largeImg" src="" alt="" /></p> 
 
<p class="thumbs"> 
<a href="http://farm1.static.flickr.com/39/85402955_bab43a4623.jpg" title="James getting dunked"><img src="http://farm1.static.flickr.com/39/85402955_bab43a4623_s.jpg" alt="small image" /></a> 
<a href="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg" title="Image 2"><img src="http://farm1.static.flickr.com/39/85391998_c0727a1f9e.jpg"  alt="small image" /> </a> 
<a href="http://farm1.static.flickr.com/39/84731233_105378632b.jpg" title="Image 3"><img src="http://farm1.static.flickr.com/39/84731233_105378632b.jpg"  alt="small image"  /></a> 
<a href="http://farm1.static.flickr.com/6/85364647_587e2ac1dc.jpg" title="Image 4"><img src="http://farm1.static.flickr.com/6/85364647_587e2ac1dc.jpg" alt="small image" /></a> 
<a href="http://farm1.static.flickr.com/39/85402955_bab43a4623.jpg" title="Image 5"><img src="http://farm1.static.flickr.com/39/85402955_bab43a4623_s.jpg" alt="small image" /></a> 
 </p>

CSS

body {
font-family:Arial,Helvetica,sans-serif;
font-size:75%;
line-height:120%;
margin:20px auto;
padding:0;
width:580px;
}
h2 {
font-family:Arial,Helvetica,sans-serif;
font-size:190%;
font-weight:bold;
line-height:100%;
margin:0 0 0.2em;
}
h2 em {
color:#999999;
font-family:Arial,Helvetica,sans-serif;
font-size:80%;
line-height:100%;
}
#largeImg {
border:1px solid #CCCCCC;
height:400px;
padding:5px;
width:550px;
}
.thumbs img {
border:1px solid #CCCCCC;
height:72px;
padding:4px;
width:98px;
}

.thumbs img:hover {
border-color:#FF9900;
}

JavaScript

//My second gallery plugin which is just a wow.
$(document).ready(function() {
            $(".thumbs a").hover(function() {
 
            var largePath = $(this).attr("href");
            var largeAlt = $(this).attr("title");
 
            $("#largeImg").attr({ src: largePath, alt: largeAlt });
 
            return false;
        });
 
    });