JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
    <a href="#1"><img id="1" src="http://placehold.it/100" onclick="showMe(this, 100)" /></a>
    <a href="#2"><img id="2" src="http://placehold.it/200" onclick="showMe(this, 200)" /></a>
    <a href="#3"><img id="3" src="http://placehold.it/300" onclick="showMe(this,300)" /></a>
    <a href="#4"><img id="4" src="http://placehold.it/400" onclick="showMe(this, 400)" /></a>
</div>

<div id="dvDisplay" style="width: 500px; height: 500px;">
    <img id="content" src="" />
</div>

CSS

.gallery{
    height: 100%;
    white-space: nowrap;
    width: 100%;
}

.gallery img{
    display: inline-block;
    vertical-align: top;
    height: 20%;
}

JavaScript

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}