JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<script src="http://mark-rolich.github.io/Magnifier.js/Gallery.js"></script>
<script src="http://mark-rolich.github.io/Magnifier.js/Magnifier.js"></script>
<script src="http://mark-rolich.github.io/Magnifier.js/Event.js"></script>
<link rel="stylesheet" href="http://mark-rolich.github.io/Magnifier.js/demo.css">
<link rel="stylesheet" href="http://mark-rolich.github.io/Magnifier.js/magnifier.css">
<link rel="stylesheet" href="http://mark-rolich.github.io/Magnifier.js/gallery.css">
<div class="gallery">
        <div class="slider">
            <ul id="gallery"></ul>
        </div>
        <div class="magnifier-preview" id="gallery-preview">
            <div class="heading">Birds of America</div>
            <div class="title" id="gallery-preview-title">&nbsp;</div>
            <div class="author">by John James Audubon</div>
        </div>
        <div class="btn-wrapper">
            <button class="prev" id="gallery-prev">&lt;</button>
            <button class="next" id="gallery-next">&gt;</button>
        </div>
    </div>

JavaScript

var evt = new Event(),
    m = new Magnifier(evt, {
        largeWrapper: document.getElementById('gallery-preview')
    }),
    imageData = [
        {
            title: 'Downy Woodpecker',
            thumb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/112_Downy_Woodpecker.jpg/250px-112_Downy_Woodpecker.jpg',
            large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/112_Downy_Woodpecker.jpg/1000px-112_Downy_Woodpecker.jpg',
        },
        {
            title: 'Hooded Warbler',
            thumb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/110_Hooded_Warbler.jpg/250px-110_Hooded_Warbler.jpg',
            large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/110_Hooded_Warbler.jpg/1000px-110_Hooded_Warbler.jpg',
        },
        {
            title: 'Pileated Woodpecker',
            thumb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/250px-111_Pileated_Woodpecker.jpg',
            large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/1000px-111_Pileated_Woodpecker.jpg',

        },
         {
            title: 'Wood Pewee',
            thumb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/115_Wood_Pewee.jpg/250px-115_Wood_Pewee.jpg',
            large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/115_Wood_Pewee.jpg/1000px-115_Wood_Pewee.jpg',
            url: 'http://commons.wikimedia.org/wiki/File:115_Wood_Pewee.jpg'
        },
        {
            title: 'Blue Grosbeak',
            thumb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/122_Blue_Grosbeak.jpg/250px-122_Blue_Grosbeak.jpg',
            large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/122_Blue_Grosbeak.jpg/1000px-122_Blue_Grosbeak.jpg',
            url: 'http://commons.wikimedia.org/wiki/File:122_Blue_Grosbeak.jpg'
        },
        {
            title: 'Cat Bird',
            thumb:...