JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://davist11.github.io/jQuery-Stickem/jquery.stickem.js"></script>
<script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div class="containers">
    <section class="green"></section>
    <div class="rowstick stickem-container">
        <div id="target" class="content1500">
            <div class="aside stickem">
                <div id="col1"><div data-anchor-target="#target" data-100-top="opacity:0;" data-0-top="opacity:1;">Image1</div></div>
                <div id="col2"><div data-anchor-target="#target" data-100-top="opacity:0;" data--400-top="opacity:1;">Image2</div></div>
                 <div id="col2"><div data-anchor-target="#target" data-100-top="opacity:0;" data--800-top="opacity:1;">Image3</div></div>
               <div id="col1"><div data-anchor-target="#target" data-100-top="opacity:0;" data--1200-top="opacity:1;">Image4</div></div>
                <div id="col2"><div data-anchor-target="#target" data-100-top="opacity:0;" data--1600-top="opacity:1;">Image5</div></div>
                 <div id="col2"><div data-anchor-target="#target" data-100-top="opacity:0;" data--2000-top="opacity:1;">Image6</div></div>
            </div>
        </div>
    </div>
</div>
<section class="blue"></section>
<section class="red"></section>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/1.5 Helvetica, Arial, sans-serif;
}
.containers {
    width: 100%;
}
section {
    background-color: #333;
    width:100%;
    height:500px;
}
.rowstick {
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative;
}
#col1 {
    width: 33.33%;
    height:200px;
    float:left;
    background-color: grey;
    border:1px solid red;
}
#col2 {
    width: 33.33%;
    height:200px;
    float:left;
    background-color: green;
    border:1px solid red;
}
#col3 {
    width: 33.33%;
    height:200px;
    float:left;
    background-color: yellow;
    border:1px solid red;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.rowstick:after {
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}
.content1500 {
    height:2000px;
}
.aside {
    background: #cecece;
    /*padding: 20px;*/
    width: 100%;
}
h2 {
    font-size: 20px;
}
.stickit {
    position: fixed;
    top: 0;
}
.stickit-end {
    /*bottom: 40px;*/
    position: absolute;
    right: 0;
}

JavaScript

$(document).ready(function () {
    $('.containers').stickem();
});

skrollr.init({
    forceHeight: false
});