JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<head>
<title>Tests</title>

<link href="Curtain_test.css" rel="stylesheet" type="text/css">
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="curtain.js" type="text/javascript"></script>
<script src="Curtain_test.js" type="text/javascript"></script>
</head>

<body>

<ol class="curtains">
	<li id="One" class="sectionOne">
    	<h1>SECTION ONE</h1>
    </li><!-- end #sectionOne -->
	<li id="Two" class="sectionTwo">
    	<h1>SECTION TWO</h1>
    </li><!-- end #sectionTwo -->
	<li id="Three" class="sectionThree">
    	<h1>SECTION THREE</h1>
    </li><!-- end #sectionThree -->
	<li id="Four" class="sectionFour">
    	<h1>SECTION FOUR</h1>
    </li><!-- end #sectionFour -->

</ol>

</body>
</html>

CSS

*{
	margin:0;
	padding:0;
}

body {
	background-color:#D6E2FB;
	height:100%;
	width:100%;
}



#One {
	background-color:#003333;
	color:#CCCCCC;
}
#Two {
	background-color:#336666;
}
#Three {
	background-color:#996600;
}
#Four {
	background-color:#999966;
}


/* STYLES Copyed from Documentation */
.curtains{
    width: 100%;
    z-index:1;
    position:relative;
}
.curtains>li{
    -webkit-transform:translateZ(0);
    background: white;
    position: fixed;
    display:block;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    z-index:1;
}
.curtains>li.hidden{display:none;}
.curtains>li:first-child{z-index:2;}

JavaScript

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 400
    });
});