JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/js/raphael.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/raphael-plugins.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/isotope.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/jquery-plugins.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/main.min.js"></script>
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/colorbox.css">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/style.css">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/styles.css">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/bootstrap2.css">
<script src="http://theconfluencegroup.com/new_site5/js/jquery.colorbox.js"></script>
<div class="span9 offset3" id="service">
    <div class="hero-unit">
         <h1 data-2700="right:100%;opacity:0;color[swing]:rgb(255,255,255);" data-2800="right:0%;opacity:1;color[swing]:rgb(0,0,0);">Services</h1>

    </div>
    <div class="hideme" style="opacity:1;">slide</div>
    <div id="rickrollzarkozing">
        <section id="doublerainbow-doubletour" class="">
            <article id="box-1" class="zoomTarget">
                	<h3><span>TestTestTest</span></h3>

                <div class="svg"></div>
                <p class="p1"><span data-value="665">—</span>&nbsp;%</p>
                <p class="p2" data-value="Les 10&nbsp;% de salariés les plus riches<br />gagnent au minimum 665&nbsp;%<br />du revenu des 10&nbsp;% les plus pauvres"></p>
            </article>
            <article id="box-3" class="zoomTarget">
                	<h3><span>Des logements inabordables</span></h3>

                <div class="svg"></div>
            </article>
            <article id="box-2" class="zoomTarget">
                	<h3><span>La précarité s'aggrave</span></h3>

                <ul>
                    <li><span class="s1"...

JavaScript

$(function () {
    $(".group1").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".group2").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".group3").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".vimeo").colorbox({
        iframe: true,
        innerWidth: "80%",
        innerHeight: "80%"
    });
});

/*
 * purecssmatrix.js, version 0.10, part of:
 * http://janne.aukia.com/zoomooz
 *
 * 0.10 initial stand-alone version
 *
 * LICENCE INFORMATION:
 *
 * Copyright (c) 2010 Janne Aukia (janne.aukia.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL Version 2 (GPL-LICENSE.txt) licenses.
 *
 */

PureCSSMatrix = (function () {
    "use strict";

    //**********************************//
    //***  Variables                 ***//
    //**********************************//

    var regexp_is_deg = /deg$/;
    var regexp_filter_number = /([0-9.\-e]+)/g;
    var regexp_trans_splitter = /([a-zA-Z]+)\(([^\)]+)\)/g;

    //**********************************//
    //***  WebKitCSSMatrix in        ***//
    //***  pure Javascript           ***//
    //**********************************//

    function cssMatrix(trans) {
        if (trans && trans !== null && trans != "none") {
            if (trans instanceof Matrix) {
                this.setMatrix(trans);
            } else {
                this.setMatrixValue(trans);
            }
        } else {
            this.m = Matrix.I(3);
        }
    }

    cssMatrix.prototype.setMatrix = function (matr) {
        this.m = matr;
    };

    function rawRotationToRadians(raw) {
        var rot = parseFloat(filterNumber(raw));
        if (raw.match(regexp_is_deg)) {
            rot = (2 * Math.PI) * rot / 360.0;
        }
        return rot;
    }

    cssMatrix.prototype.setMatrixValue = function...