JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="forkit-curtain">
    <div class="btn btn-success pull-left close-button" onclick="$('.forkit-curtain').css({'top': '-100%'})">Back</div>
     <h1> Funzone !</h1>

    <div class="row">
        <div class="col-xs-5">
            <div class="side">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h2>What's New?</h2>

                    </div>
                    <div class="panel-body">
                        <img class="img-responsive" src="http://placehold.it/500x400" />
                    </div>
                    <div class="panel-footer">
                        <div class="btn btn-success btn-lg">Ask for this Video</div>
                         <h4>Some additional info or encouragement</h4>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-7">
             <h3>Category</h3>

            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
            </div>
            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
            </div>
            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
            </div>
             <h3>Category</h3>

            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
            </div>
            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
            </div>
            <div class="thumbnail col-xs-4">
                <img src="http://placehold.it/300x300" class="img-responsive" />
...

CSS

* {
    text-align:center;
}
.progress-circle {
    width: 4em;
    height: 4em;
    display: inline-block;
    border-left: 0.75em solid rgb(92, 184, 92);
    border-right: 0.75em solid rgb(185, 185, 185);
    border-radius: 4em;
    border-top: 0.75em solid rgb(92, 184, 92);
    border-bottom: 0.775em solid rgb(92, 184, 92);
    padding: 0.7em;
    transform: rotate(-45deg);
    margin-right: 1em;
}
.slider {
    white-space:nowrap;
    overflow-x: scroll;
    height: 100vh;
}
.slider > div {
    display: inline-block;
    transform: scale(0.95);
    vertical-align:top;
    width: 100%;
}
.goal-holder > div {
    text-align: left;
    padding: 0.5em;
    padding-left: 1em;
    display: flex;
    line-height: 4em;
    padding-bottom: 1em;
    position:relative;
}
.btn-lg {
    width: 100%;
    font-size:2em;
}
.panel {
    margin: 0;
    margin-left: -8px;
}
.forkit {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    height: 150px;
    text-decoration: none;
}
.forkit .tag {
    display: block;
    height: 22px;
    width: 200px;
    text-align: center;
    background:red;
    color:white;
    z-index:999;
    -webkit-transform-origin: 15px 0px;
    -moz-transform-origin: 15px 0px;
    -ms-transform-origin: 15px 0px;
    -o-transform-origin: 15px 0px;
    transform-origin: 15px 0px;
}
.forkit .tag:after {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 196px;
    height: 26px;
    margin: 1px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.forkit .string {
    display: block;
    height: 1px;
    width: 0px;
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
}
.forkit-curtain {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: -100%;
   ...

JavaScript

var goals = $('.goal-holder > div');

function highgoal() {
    $(goals[~~ (Math.random() * goals.length)]).effect('highlight', 2000);

}

(function scroller(n) {
    if (n == 4) {
        n = 0;
        $('.slider').animate({
            scrollLeft: 0
        }, 800, highgoal);
    } else {
        $('.slider').animate({
            scrollLeft: $('.slider').scrollLeft() + $('.panel-ref').width()
        }, 800, highgoal);
    }

    setTimeout(function () {
        scroller(n + 1);
    }, 4300)

})(0);


$(document).ready(function () {

    (function () {

        var STATE_CLOSED = 0,
            STATE_DETACHED = 1,
            STATE_OPENED = 2,

            TAG_HEIGHT = 30,
            TAG_WIDTH = 200,
            MAX_STRAIN = 40,

            // Factor of page height that needs to be dragged for the
            // curtain to fall
            DRAG_THRESHOLD = 0.36;

        VENDORS = ['Webkit', 'Moz', 'O', 'ms'];

        var dom = {
            ribbon: null,
            ribbonString: null,
            ribbonTag: null,
            curtain: null,
            closeButton: null
        },

        // The current state of the ribbon
        state = STATE_CLOSED,

            // Ribbon text, correlates to states
            closedText = '',
            detachedText = '',

            friction = 1.04;
        gravity = 1.5,

        // Resting position of the ribbon when curtain is closed
        closedX = TAG_WIDTH * 0.4,
        closedY = -TAG_HEIGHT * 0.5,

        // Resting position of the ribbon when curtain is opened
        openedX = TAG_WIDTH * 0.4,
        openedY = TAG_HEIGHT,

        velocity = 0,
        rotation = 45,

        curtainTargetY = 0,
        curtainCurrentY = 0,

        dragging = false,
        dragTime = 0,
        dragY = 0,

        anchorA = new Point(closedX, closedY),
        anchorB = new Point(closedX, closedY),

        mouse = new Point();

        function initialize() {

            dom.ribbon =...