JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/modernizr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/raphael.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/raphael-plugins.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/zoomooz-libs.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/isotope.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/jquery-plugins.js"></script>
<div id="rickrollzarkozing">
	<header>
		<a class="coucou"></a>
		<h1>2007 – 2012</h1>
		<h2>Le dépôt de bilan de Sarkozy</h2>
	</header>
	<section id="doublerainbow-doubletour" class="clearfix">
		<article id="box-1" class="bilan">
			<h3><span>Inégalités salariales</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">Les 10&nbsp;% de salariés…</p>
		</article>
		<article id="box-3" class="bilan">
			<h3><span>Des logements inabordables</span></h3>
			<div class="svg"></div>
		</article>
		<article id="box-2" class="bilan">
			<h3><span>La précarité s'aggrave</span></h3>
			<ul>
				<li><span class="s1" data-value="8035000">—</span><strong>pauvres</strong> en France en 2010</li>
				<li>soit<span class="s2"> + <span class="digit" data-value="82000">—</span></span> pauvres / an</li>
				<li>soit<span class="s2"> + <span class="digit"...

CSS

/* @group RESETS */

/* Eric Meyer reset.css v2.0 | 20110126 */
 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
/*blockquote, q {quotes: none;}blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} not W3C valid ! */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Redefine & other resets */
 html, body {
    height: 100%;
}
body {
    min-height: 100%
}
a img {
    border: none;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}
input, button, select {
    vertical-align: middle;
}
blockquote, q {
    quotes:'\ab\2005''\2005\bb''\2039\2005''\2005\203a';
}
/*:lang(fr)*/
 blockquote:before, q:before {
    content: open-quote;
}
blockquote:after, q:after {
    content: close-quote;
}
:focus {
    outline: 0 none;
}
/* @end */

/* @group GLOBAL */

/* @group COMMON */
 * {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
}
html, body {
    height: 100%;
}
body {
    min-height: 100%
}
/*html {overflow-x:hidden;}html.noScroll {overflow:hidden;}*/
 body {
    color: #222;
    font-family: Jaures, serif;
    overflow-x: hidden;
   ...

JavaScript

$(function () {
    var hash = (document.location.hash.substring(1).split('-'))[1];
    if (hash != '' && hash != undefined) {
        if ('pushState' in history) history.pushState('', document.title, window.location.pathname);
        else window.location.hash = '';
        $.doTimeout(800, function () {
            $('.nav a[href*="' + hash + '"]').trigger('click')
        })
    } else {
        $.fancybox.open($('.YunovoteFH2012'), {
            openSpeed: 150,
            closeSpeed: 150,
            closeBtn: false,
            padding: 0,
            helpers: {
                overlay: {
                    opacity: '0.9',
                    css: {
                        'background-color': '#fff',
                        top: '150px'
                    }
                }
            },
            afterLoad: function () {
                $('body').css('overflow-y', 'hidden')
            },
            beforeClose: function () {
                $('body').css('overflow-y', 'auto')
            }
        });
        $('.YunovoteFH2012 .welcome-close').click(function () {
            $.fancybox.close()
        });
        $(document).bind("keydown.welcome", function (e) {
            if (e.keyCode == 37 || e.keyCode == 39) {
                $(this).unbind('keydown.welcome');
                $.fancybox.close()
            }
        })
    }
    var $isotopeContainer = $('#doublerainbow-doubletour'),
        navPath = [],
        currentPath = 0;

    function listIsotopeEl() {
        navPath = [];
        $('article:not(.isotope-hidden, .pgm)').each(function () {
            navPath.push(parseInt(($(this).attr('id').split('-'))[1]))
        })
    }
    $isotopeContainer.isotope({
        itemSelector: 'article',
        filter: '*:not(.pgm)',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: 270
        },
        animationEngine: 'jquery',
        transformsEnabled: false,
        onLayout: function ($elems, instance) {
         ...