JSFiddle - React, Tailwind, and code Playground

by Stijntjhe

HTML

<div class="gallery">
    <a href="#1"><img src="http://placehold.it/100" /></a>
    <a href="#2"><img src="http://placehold.it/200" /></a>
    <a href="#3"><img src="http://placehold.it/300" /></a>
    <a href="#4"><img src="http://placehold.it/400" /></a>
</div>

<div id="big">
    <img id="1" src="http://placehold.it/100" />
    <img id="2" src="http://placehold.it/200" />
    <img id="3" src="http://placehold.it/300" />
    <img id="4" src="http://placehold.it/400" />
</div>

CSS

.gallery {
    text-align: center;
}

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

#big {
    position: absolute;
    bottom: 0;
    width:100%;
    text-align: center;
}

#big img {
    display: none;
}

#big img:target {
    display: inline;
}