JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<!-- Interactive Layout - BEGIN -->
<div id="lp-feature">
    <div id="bl-main" class="lp-interactive-main">
        <section>
            <img src="http://kohlscorporation-dev/flash/btc2013/FullscreenLayoutPageTransitions/images/room1.jpg" alt="" class="lp-interactive-image" />	<span class="lp-interactive-room lp-room1"></span>

            <div class="bl-content">
                <ul>
                    <li>
                        <h3>Room 1</h3>
                    </li>
                    <li>
                        <p>Brighten up a small space with compact furniture and a cohesive color palette.</p>
                    </li>
                    <li><a class="lp-href" href="">Shop this room</a>
                    </li>
                </ul>	<a class="bl-plus bl-plus-anchor1">Plus icon 1</a>

                <div class="tooltip">
                    	<h4>A reversible comforter set makes the grade in style and value.</h4>

                    <img src="http://kohlscorporation-dev/flash/btc2013/FullscreenLayoutPageTransitions/images/room1-tooltip-thumb.jpg" alt="" />	<a href="">Shop this bedding</a>

                </div>	<a class="bl-plus bl-plus-anchor2">Plus icon 2</a>

                <div class="tooltip">
                    	<h4>Hello World!</h4>

                    <img src="http://kohlscorporation-dev/flash/btc2013/FullscreenLayoutPageTransitions/images/room1-tooltip-thumb.jpg" alt="" />	<a href="">Shop this bedding</a>

                </div>
            </div>	<span class="bl-icon bl-icon-close"></span>

        </section>
        <section id="bl-work-section">
            <img src="http://kohlscorporation-dev/flash/btc2013/FullscreenLayoutPageTransitions/images/room1.jpg" alt="" class="lp-interactive-image" />	<span class="lp-interactive-room lp-room2"></span>

           ...

CSS

/*===================================
    INTERACTIVITY LAYOUT
=====================================*/
#lp-feature,
.lp-interactive-main,
.lp-interactive-main > section,
.lp-interactive-image,
.lp-interactive-room,
.lp-interactive-room-animate1,
.lp-interactive-room-animate2,
.lp-room1,
.lp-room2,
.lp-room3,
.lp-room4,
.lp-href {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin:0;
  padding:0;
  border:0;
}
/* HTML5 display-role reset for older browsers */
section {
  display: block;
}

#lp-feature {
  background:#404041;
  float:left;
  margin:0 0 20px;
  padding:62px 31px 0;
  position:relative;
  width:100%;
}
.lp-interactive-main {
  float:left;
  height: 548px;
  overflow: hidden;
  position: relative;
  width: 924px; 
}

.lp-interactive-main > section {
  position: absolute;
  width: 463px;
  height: 242px;
}

.lp-interactive-main > section:first-child {
  border-right:9px solid transparent;
  left: 0;
  overflow:hidden;
  top: 0;
  z-index:1;
}
.lp-interactive-main > section:first-child.bl-expand, 
.lp-interactive-main > section:nth-child(2).bl-expand,
.lp-interactive-main > section:nth-child(3).bl-expand,
.lp-interactive-main > section:nth-child(4).bl-expand {
  border:none;
}

.lp-interactive-image {
  margin:-56px 0 0 -9px;
  min-width:510px;
  width:100%;
}

section.bl-expand .lp-interactive-image {
  -webkit-transform: translate(9px, 56px);
  -moz-transform: translate(9px, 56px);
  -ms-transform: translate(9px, 56px);
  transform: translate(9px, 56px);
  max-width:924px;
  width:110%;
}

.lp-interactive-main > section:nth-child(2) {
  border-left:9px solid transparent;
  left: 50%;
  overflow:hidden;
  top: 0;
  z-index:1;
}

.lp-interactive-main > section:nth-child(3) {
  border-right:9px solid transparent;
  left: 0;
  overflow:hidden;
  top: 264px;
  z-index:1;
}

.lp-interactive-main > section:nth-child(4) {
  border-left:9px solid transparent;
  left: 50%;
  overflow:hidden;
  top: 264px;
 ...

JavaScript

/**
 * boxlayout.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var Boxlayout = (function () {

    var $el = $('#bl-main'),
        $sections = $el.children('section'),
        // works section
        $sectionWork = $('#bl-work-section'),
        // work items
        $workItems = $('#bl-work-items > li'),
        // work panels
        $workPanelsContainer = $('#bl-panel-work-items'),
        $workPanels = $workPanelsContainer.children('div'),
        totalWorkPanels = $workPanels.length,
        // navigating the work panels
        $nextWorkItem = $workPanelsContainer.find('nav > span.bl-next-work'),
        // if currently navigating the work items
        isAnimating = false,
        // close work panel trigger
        $closeWorkItem = $workPanelsContainer.find('nav > span.bl-icon-close'),
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
        },
        // transition end event name
        transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
        // support css transitions
        supportTransitions = Modernizr.csstransitions;

    function init() {
        initEvents();
    }

    function initEvents() {

        $sections.each(function () {

            var $section = $(this);

            // expand the clicked section and scale down the others
            $section.on('click', function () {

                if (!$section.data('open')) {
                    $section.data('open', true).addClass('bl-expand bl-expand-top');
                    $el.addClass('bl-expand-item');
                }

            }).find('span.bl-icon-close').on('click', function () {

  ...