JSFiddle - React, Tailwind, and code Playground

by vovcat

HTML

<!doctype html>
<html>
<body>
    <div class="stat"></div>
    <div class="space"></div>
    <div class="scroller">
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
        <div class="space"></div>
        
        <div class="tabbed">
            <div class="tabs-wrap">
                <ul class="tabs">
                    <li class="tab tab-selected" data-tab="#tab1">
                        <span>First tab</span></li>
                    <li class="tab" data-tab="#tab2">
                        <span>Second tab</span></li>
                </ul>
            </div>
            <div class="tab-pane tab-selected" id="tab1">
                <div class="tab-content">
                    <div class="img img1 a">img a1</div>
                    <div class="img img2 a">img a2</div>
                    <div class="img img3 a">img a3</div>
                    <div class="img img4 a">img a4</div>
                    <div class="img img5 a">img a5</div>
                    <div class="img img6 a">img a6</div>
                </div>
            </div>
            <div class="tab-pane" id="tab2">
                <div class="tab-content">
                    <div class="img img1 b">img b1</div>
                    <div class="img img2 b">img b2</div>
                    <div class="img img3 b">img b3</div>
                    <div class="img img4 b">img b4</div>
                    <div class="img img5 b">img b5</div>
                    <div class="img img6 b">img b6</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body { }
.stat { position: fixed; border:1px solid; width:100%;  height:16pt; }
.space { padding-top:20pt; }
.scroller { overflow:auto; height:80px; border:1px solid red;}

.tabbed {
    border: 1px solid #2AC7E1;
}
.tabs-wrap {
    padding-right: 24px;
}
.tabs {
    border-bottom: 2px solid #3D3D3D;
    cursor: default;
    line-height: 0; 
    margin-right: -24px;
    outline: medium none;
    padding: 2px 0 0;
}
.tab {
    display: inline-block; position: relative;
    border-bottom: 24px solid #3D3D3D;
    border-right: 24px solid transparent;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    height: 0;
    margin-right: -12px;
    margin-top: -1px;   
    opacity: 0.35;      
    padding: 0;         
    text-transform: uppercase;
    -moz-user-select: none;   
}
.tab.tab-selected {
    opacity: 1;
    z-index: 1000;
}
.tab-text, .tab span {
    line-height: 24px;
    margin: 0 11px 0 15px;
    position: relative;   
}
.tab:hover {
    border-bottom-color: #2AC7E1;
    opacity: 1;
    z-index: 100;
}
.tab-pane { display: none; overflow:auto; height: 180px;}
.tab-pane.tab-selected { display: block; }
.tab-content { position:relative; width:800px; height:800px; }

.img { position: absolute; border: 1px solid red; height: 12pt; }
.img1 { top:100px; left:100px; }
.img2 { top:100px; left:600px; }
.img3 { top:500px; left:100px; }
.img4 { top:200px; left:200px; xvisibility:hidden; }
.img5 { top:250px; left:250px; xdisplay:none; }
.img6 { top:300px; left:300px; xopacity:0; }

JavaScript

$(function() {
    $('.tabs .tab').on('click', function() {
        $(this).siblings().removeClass('tab-selected');
        $(this).addClass('tab-selected');
        $(this).parents('.tabbed')
            .find('.tab-pane').removeClass('tab-selected')
            .filter($(this).data('tab')).addClass('tab-selected');
    });

    function invis(el) {
        var w = el.offsetParent().parent();
        return el.is(':hidden') ||
            el.position().top + el.height() < w.scrollTop() || 
            el.position().top > w.scrollTop() + w.height() ||
            el.position().left + el.width() < w.scrollLeft() || 
            el.position().left > w.scrollLeft() + w.width() ||
            (el[0] === w[0] ? 0 : invis(w)); 
    }

    function desc(el) {
        return (el.is(':visible') ? '*' : '-') + 
            (!invis(el) ? '*' : '-');
    }
    
    var stat_cnt = 0;
        
    function stat() {
        $('.stat').text(
                    ' a:' + desc($('.a.img1')) + 
                    ' ' + desc($('.a.img2')) + 
                    ' ' + desc($('.a.img3')) + 
                    ' ' + desc($('.a.img4')) + 
                    ' ' + desc($('.a.img5')) + 
                    ' ' + desc($('.a.img6')) +
                    ' b:' + desc($('.b.img1')) + 
                    ' ' + desc($('.b.img2')) + 
                    ' ' + desc($('.b.img3')) + 
                    ' ' + desc($('.b.img4')) + 
                    ' ' + desc($('.b.img5')) + 
                    ' ' + desc($('.b.img6')) +
                    ' ' + stat_cnt++
        );
    }
    $(window).on('scroll resize', function() {
        stat();
    });
    (function() {
        stat();
        setTimeout(arguments.callee, 100);
    })();
});