JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article-media article-media-main">
    <div class="image">
        <div class="image-frame">
            <img src="http://placekitten.com/150/150" alt="">
        </div>
        <p class="caption">caption 1</p>
    </div>
</div>

<div class="article-media article-media-thumbs">
    <div class="content-item cipos-1 cirpos-3">
        <a href="http://placekitten.com/150/150"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 1</p>
    </div>

    <div class="content-item cipos-2 cirpos-2">
        <a href="http://placekitten.com/160/160"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 2</p>
    </div>
    
    <div class="content-item cipos-3 cirpos-1">
        <a href="http://placekitten.com/170/170"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 3</p>
    </div>
</div>

CSS

body { font-size: 11px; font-family: arial; }
.article-media-main { border: 1px solid #000; margin: 5px; padding: 5px; }
.article-media-main .caption { background: #999; padding: 5px; }
.article-media-thumbs { border: 1px solid #999; overflow: hidden; padding: 5px; margin: 5px; }
.article-media-thumbs .content-item { width: 50px; display: inline-block; margin: 0 5px; }
.article-media-thumbs .current { border: 1px solid #c00; }

JavaScript

getAndDropLink = function(n) {
    if (n) {
        var href = n.getAttribute('href');
        n.removeAttribute('href');
        return href;
    }
};

var caption, s, main, i, j, a, items, bindNoImage, bindImage, setCurrent, current;

bindNoImage = function(n, s, i) {
    return function() {
        setCurrent(i);
        n.innerHTML = s;
    };
};

bindImage = function(n, src, caption, i) {
    return function() {
        setCurrent(i);
        var s, img, p, c;
        img = n.querySelector('.image-frame img');
        p = n.querySelector('p.caption');

        if (img) {
            img.src = src;
            if (caption && p) {
                p.innerHTML = caption;
            }
        } else {
            s = '<div class="image-frame"><img src="' + a + '"</div>';
            s += '<p class="caption">' + caption + '</div>';
            n.innerHTML = s;
        }
    };
};

items = document.querySelectorAll('.article-media-thumbs .content-item');
main = document.querySelector('.article-media-main');

setCurrent = function(i) {
    if (current !== undefined) {
        items[current].className = items[current].className.replace(' current', '');
    }
    current = i;
    items[current].className += ' current';
}

setCurrent(0);

var r, p, pc, z, n, nc;
r = document.querySelector(".article-media-thumbs");
p = document.createElement("button");
pc = document.createTextNode("Prev");
p.appendChild(pc);
p.setAttribute("id", "prev");
z = r.firstChild;
z.parentNode.insertBefore(p, z);
n = document.createElement("button");
nc = document.createTextNode("Next");
n.appendChild(nc);
n.setAttribute("id", "next");
r.appendChild(n);
if (!main) {
    return;
}

for (i = 0; i < items.length; i++) {
    caption = items[i].querySelector('.thumbnail-caption');
    if (caption) {
        a = getAndDropLink(items[i].querySelector('a'));
        if (a) {
            items[i].addEventListener('click', bindImage(main, a, caption.innerHTML, i), false);
        }
    } else { /* backup...