JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbs-wrapper">
    <img src="http://placehold.it/350x150/414E5B" alt="Alt">
    <img src="http://placehold.it/350x150/14B75A" alt="Alt">
    <img src="http://placehold.it/350x150/C0392B" alt="Alt">
    <img src="http://placehold.it/350x150/ECB124" alt="Alt">
</div>
<br>
<div class="thumbs-wrapper">
    <img src="http://3.bp.blogspot.com/-Ah66MLalGlU/T8uvFqruVcI/AAAAAAAAAXE/LLnaIGsWn2U/s320/wallpaper-desktop-widescreen-3.jpg" alt="Alt">
    <img src="http://1.bp.blogspot.com/-KkHigbPbZfM/UM8X6-UoVwI/AAAAAAACfmU/a_mq2mPgWqE/s320/Magazines-24+%283%29.jpg" alt="Alt">
    <img src="http://3.bp.blogspot.com/-ZkYmM4G7u-k/UXKMPkHa1rI/AAAAAAAAEYI/B_O0hue3T0w/s320/welcome+wallpaper.jpg" alt="Alt">
    <img src="http://4.bp.blogspot.com/-E4kDFZoBkO8/UB1a0OOxZXI/AAAAAAAAADw/6dtng9D-uFE/s320/laptop-wallpapers-widescreen-2.jpg" alt="Alt">
    <img src="http://fsb.zedge.net/scale.php?img=MS8zLzYvOS8xLTEwNDU1ODQxLTEzNjkxMzcuanBn&ctype=1&v=4&q=71&xs=320&ys=200&sig=d551e71c3c2b6022d284302a576f6594e77ed71c" alt="Alt">
    <img src="http://2.bp.blogspot.com/_v5h2qxDB1io/TPuFscjEIUI/AAAAAAAAAYY/gXNXE3MRblU/s320/Christmas+HD+Wallpapers+1920x1200+%252879%2529.jpg" alt="Alt">
</div>
<br>
<div class="thumbs-wrapper">
    <img src="http://placehold.it/360x250/14B75A" alt="Alt">
    <img src="http://placehold.it/360x250/414E5B" alt="Alt">
    <img src="http://placehold.it/360x250/C0392B" alt="Alt">
</div>

CSS

.thumbs-wrapper {
    position: relative;
}
.thumbs-wrapper img {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}
.thumbs-wrapper img:first-child {
    display: block;
}
.tmb-wrap {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: table;
}
.tmb-wrap div {
    display: table-cell;
    height: 100%;
    border-bottom: transparent 5px solid;
}
.tmb-wrap div.active {
    border-color: #FBB254;
}

JavaScript

$(".thumbs-wrapper").append("<div class='tmb-wrap'>").append("<div class='image-wrap'>").each(function() {
  var this_wrapper = $(this);
  this_wrapper.find("img").appendTo(this_wrapper.find(".image-wrap")).each(function() {
    this_wrapper.width($(this).width()).height($(this).height()).find(".tmb-wrap").width($(this).width()).height($(this).height()).append("<div>");
  }); 
});
$(".tmb-wrap div").hover(function() {
  var this_img = $(this).parent(".tmb-wrap").parent(".thumbs-wrapper").find(".image-wrap").find("img");
  var all_thmbs = $(this).parent(".tmb-wrap").find("div");
  this_img.stop().fadeOut(200).eq($(this).index()).stop().fadeIn(200);
  all_thmbs.removeClass("active");
  $(this).addClass("active");
}).parent().find(":first").addClass("active");