JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="scroller-slide fullscreen">
    <div class="content colour-background" style="background-color: #939597;">
        <div class="inner-scroller-content">
        </div>
    </div>
</div>

CSS

/*
RESETS ------------------------
*/ 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: ;background: transparent;}

/*
RESETS END --------------------
*/

.scroller-slide {
	position: relative;
	width: 100%;
}

.scroller-slide .content {
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
}

.scroller-slide .content.image-background {
	background: no-repeat 50% 50%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.scroller-slide .content .inner-scroller-content {
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;
	-webkit-transition: opacity 300ms ease-in-out;
    -moz-transition: opacity 300ms ease-in-out;
    -ms-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}

.scroller-slide .active {
	position: fixed !important;
	top: 0; left: 0;
}

.scroller-slide .active .inner-scroller-content {
	opacity: 1 !important;
}

JavaScript

$(document).ready(function () {
        Resize();
    });
    
    $(window).load(function () {
        Resize();
    });

    //Every resize of window
    $(window).resize(function () {
        Resize();
    });

    //Dynamically assign height
    function Resize() {
        // Handler for .ready() called.
        var windowHeight = $(window).height(),
            finalHeight = windowHeight + 'px';

        $('.fullscreen').css('min-height', finalHeight);

    }