JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="gallery">
    <img src="//placehold.it/600x450?text=img1">
    <img src="//placehold.it/600x450?text=img2">
    <img src="//placehold.it/600x450?text=img3">
    <img src="//placehold.it/600x450?text=img4">
    <img src="//placehold.it/600x450?text=img5">
</div>
<div id="bigIMG">
    <img id="bIMG" src="">
</div>

CSS

#gallery{
    width:100px;
    outline:1px dotted;
    padding:2px;
    float:left;
}
#gallery img{
    width:100px;
    height:75px;
    cursor:pointer;
}
#bigIMG{
    width:400px;
    height:300px;
    padding:10px;
    outline:2px dashed;
    float:left;
    margin-left:50px;
}
#bIMG{
    width:100%;
    height:100%;
}

JavaScript

$('#gallery img').each(function(){
	$(this).on('click', function(){
        var src = $(this).attr('src');
    	$('#bIMG').attr('src', src);
    });
});