JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<div id="wrapper">
            <div id="gallery_title">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span> adipisicing elit</span>
            </div>
        <div id="img_container">
            <!-- Image height is from the x coord it starts to the bottom of the screen minus the caption & thumbnails height & then updated on resize -->
            <img id="main_image" src="http://farm1.static.flickr.com/92/233508614_52027e9e6f_b.jpg" />
        </div>
    </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" />
      ...

CSS

a:link,a:visited, a img {border:0 none;}
/*#wrapper {
        position:fixed;
        top:10px;
        bottom:130px;
        left:0;
        right:0;
        background:yellow;
        text-align:center;
}*/
#gallery_title {
        /*background-color:green;*/
        font-size:32px;
}
#img_container {
        /*background-color:blue;*/
        text-align:center;
}
/*#main_image {
        position:absolute;
        left:50%;
}*/
#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;
}

JavaScript

function imagePos() {
        var 
            windowHeight = $(window).height(),
            imgOffset = $('#img_container').offset(),
            imgHeight = windowHeight - imgOffset.top - 130
        ;
        console.log(windowHeight);
        $('#main_image').css('height', imgHeight);
    }
    imagePos();
    $(window).resize(function(){
        imagePos();        
    });