JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<div id="img_container">
    <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_b.jpg" />
</div>
<div id="thumbs">
    <ul>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_s.jpg" />
            </a>
        </li>
    </ul>
</div>

CSS

a:link,a:visited, a img {border:0 none;}
#img_container {
        position:fixed;
        top:10px;
        bottom:130px;
        left:0;
        right:0;
        /*opacity:0.8;*/
        /*background-color:blue;*/
        text-align:center;
}
#img_container img {
        height:100%;
}
#thumbs {
        position:fixed;
        bottom:35px;
        left:0;
        right:0;
        /*background-color: red;*/
        height:75px;
}
#thumbs ul {
        list-style-type:none;
        text-align:center;
        margin:0 auto;
        padding:0;
        height:75px;
        overflow:hidden;
}
#thumbs li {
        display:inline-block;
}
#thumbs li img {
        display:block;
}