JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="row-fluid">
    <div class="col-sm-12">
        <ul class="image-list">
            <li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g3.jpg" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
            <li><img src="photos/g4.jpg" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g5.jpg" alt="Photo number 5" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g6.jpg" alt="Photo number 6" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g7.jpg" alt="Photo number 7" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g8.jpg" alt="Photo number 8" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g9.jpg" alt="Photo number 9" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
            <li><img src="photos/g10.jpg" alt="Photo number 10" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
        </ul>
        <div class="navigation" id="nav">
            <span class="previous" id="prev"><a href="">Prev</a></span>
            <span class="next" id="next"><a href="">Next</a></span>
        </div>
    </div>
</div>

CSS

ul.image-list{
    padding:0;
    margin: 0;
    list-style: none;
}
 ul.image-list li{
    display: inline-block;
}
 ul.image-list li img{
    width: 190px;
    min-width: 70px;
    transition: all ease 0.4s;
 }
 ul.image-list li img:hover{
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #000;
 }

JavaScript

function view(src)
        {
            var viewer = document.getElementById("viewer");
            viewer.innerHTML ='<img src="' + src + '" id="img"/>';
            viewer.innerHTML =
            var img = document.getElementById("img");
            var iw=0, ih=0;
            var dw=0, dh=0;

            img.onload=function(){
                document.getElementById("ov").style.display="block";
                document.getElementById("nav").style.display="block";
                viewer.style.display="block";
                iw = viewer.offsetWidth;
                ih = viewer.offsetHeight;
                dw = window.innerWidth;
                dh = window.innerHeight;
                viewer.style.top = parseInt(dh/2-ih/2) + "px";
                viewer.style.left = parseInt(dw/2-iw/2) + "px";
            };
        }
        function hide2()
        {
            document.getElementById("viewer").style.display="none";
            document.getElementById("ov").style.display="none";
            document.getElementById("nav").style.display="none";
        }