JSFiddle - React, Tailwind, and code Playground

by Stijntjhe

HTML

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

<div id="big"></div>

CSS

.gallery {
    text-align: center;
}

.gallery img {
    height: 100px;
    
    cursor: pointer;
}

.gallery img:target {
    height: 200px;
}

#big {
    width: 200px;
    margin: 0 auto;
}

#big img {
    height: 200px;
    width: 200px;
}

JavaScript

function show(img) {
    document.getElementById('big').innerHTML = '<img src="' + img.src + '" />';   
}