JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<script>
    function updateIMG(e) {
        document.getElementById("preview").src = e;
    }
</script>
<div class="preview">
    <img id="preview" src="//placehold.it/800x600&text=IMG-ONE" />
</div>
<div class="thumbs">
    <ul id="thumbs-1">
        <li>
            <img src="//placehold.it/800x600&text=IMG-ONE" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-TWO" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-THREE" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
    </ul>
    <ul id="thumbs-2">
        <li>
            <img src="//placehold.it/800x600&text=IMG-FOUR" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-FIVE" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-SIX" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
    </ul>
    <ul id="thumbs-3">
        <li>
            <img src="//placehold.it/800x600&text=IMG-SEVEN" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-EIGHT" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
        <li>
            <img src="//placehold.it/800x600&text=IMG-NINE" onmouseover="updateIMG(this.src);" />
            <span class="description">Description</span>
        </li>
    </ul>
</div>

CSS

* {
    margin:0 auto;font-family:Arial;
}
.thumbs img {
    height:100px;
}
li {
    list-style:none;
    height:120px;
    border:yellow dotted 1px;
    cursor:pointer;
    background-color:grey;
}
.description{height:20px;position:absolute;font-size:10px;line-height:10px;}
.preview {
    width:400px;
    height:300px;
    border:red dotted 1px;
}
div.thumbs, div.preview {
    float:left;
}
.preview img {
    height:300px;
}
.thumbs ul li {
    float:left;
}