JSFiddle - React, Tailwind, and code Playground

by exizt

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/4.4.8/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/4.4.8/fotorama.js"></script>
<div id="fotorama" data-nav="thumbs">
     <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/1-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/1-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/2-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/2-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/3-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/3-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/4-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/4-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/5-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/5-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/24-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/24-thumb.jpg" data-thumbwidth="144" data-thumbheight="214"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/6-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/6-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/7-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/7-thumb.jpg" data-thumbwidth="144" data-thumbheight="96"></a>
    <a href="http://fotorama.s3.amazonaws.com/i/okonechnikov/8-lo.jpg" data-thumb="http://fotorama.s3.amazonaws.com/i/okonechnikov/8-thumb.jpg" data-thumbwidth="144" data-thumbheight="80"></a>
    <a...

CSS

<link  href="http://fotorama.s3.amazonaws.com/4.4.8/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.4.8/fotorama.js"></script> <!-- 15 KB -->

JavaScript

// Change ↓values↓, press ↑Run↑, see →Result→
$('#fotorama').fotorama();

$('.fotorama__thumb').on('mouseenter', function() {
    var i = $('.fotorama__thumb').index(this);
    $('#fotorama').data('fotorama').show(i);
})