JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<script src="http://framp.me/portfolio/js/jquerypp.custom.js"></script>
<script src="http://framp.me/portfolio/js/jquery.bookblock.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <div class="portfolio wrapper-table">
    <div class="wrapper-vertical">	
      <div class="wrapper-horizontal">
        <div class="wrapper-square">
          <div class="wrapper-square-dummy"></div>
          <div class="wrapper-square-element">
            <div class="bk-book bk-bookdefault">
              <div class="bk-front">
                <div class="bk-cover">
                  <div class="color-container hidden before clearfix">
                    <div class="color-square background-color-ED5565"></div>
                    <div class="color-square background-color-DA4453"></div>
                    <div class="color-square background-color-FC6E51"></div>
                    <div class="color-square background-color-E9573F"></div>
                    <div class="color-square background-color-FFCE54"></div>
                    <div class="color-square background-color-FCBB42"></div>
                    <div class="color-square background-color-A0D468"></div>
                    <div class="color-square background-color-8CC152"></div>
                    <div class="color-square background-color-48CFAD"></div>
                    <div class="color-square background-color-37BC9B"></div>
                  </div>
                  <div class="bk-title">
                    <div>
                      <h2 class="highlight before">Stuff</h2>
                      <h1><span class="highlight">PORT</span>FOLIO</h1>
                      <h2>Federico Rampazzo</h2>
                    </div>
                  </div>
                  <h3>
                    <a href="#" class="change-color highlight">Change Color</a> | 
                    <a href="#" class="highlight bk-bookview">Open me</a> |
                    <a href="#"...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,800);


html, body { height: 100%; }

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    background: #333;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    overflow: scroll;
    overflow-x: hidden;
}
a {
  color: #555;
  text-decoration: none;
}

.wrapper-table{
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper-vertical{
  display: table-cell;
  vertical-align: middle;
}
.wrapper-horizontal{
  min-height: 350px;
  width: 50%;
  max-width: 500px;
  margin: auto;
  position: relative;
}
.wrapper-square {
  display: inline-block;
  position: relative;
  width: 100%;
}
.wrapper-square-dummy {
  margin-top: 100%;
}
.wrapper-square-element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hidden {
  display:none;
}
.bk-book {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s, margin .5s;
	-moz-transition: -moz-transform .5s, margin .5s;
	transition: transform .5s, margin .5s;
}

.bk-book > div,
.bk-front > div {
	display: block;
	position: absolute;
}

.bk-front {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
	-webkit-transform:...

JavaScript

var book = $('.bk-book');
var bookPage = book.children('div.bk-page');
var viewBookLink = book.find('.bk-bookview');
var viewBackLink = book.find('.bk-bookback');
var changeColorLink = book.find('.change-color');
var colorContainers = book.find('.color-container');

var bookDefault = function(){
  book.data({ opened : false, flip : false })
      .removeClass('bk-viewback bk-viewinside')
      .addClass('bk-bookdefault');
};
var bookBack = function(){
  book.data({ opened : false, flip : true })
      .removeClass('bk-viewinside bk-bookdefault')
      .addClass('bk-viewback');
};
var bookInside = function(){
  book.data({ opened : true, flip : false })
      .removeClass('bk-viewback bk-bookdefault')
      .addClass( 'bk-viewinside');
};

bookDefault();

viewBackLink.on('click', function(){
  if(book.data('flip')){
    bookDefault();
  }else{
    bookBack();
  }
  return false;
});

viewBookLink.on('click', function(){
  bookInside();
  return false;
});

//Detect click outside book
$('html').on( 'click', function(event) {
  if ($(event.target).parents('.bk-book').length == 0){
    bookDefault();
    if (!colorContainers.hasClass('hidden'))
      changeColorLink.click();
  }
  return false;
});

//Change color
var colorLabel = (function(){
  var labels = ['Change Color', '❤ this color']
  return function(){
    labels.push(labels.shift());
    return labels[0];
  }
})();
changeColorLink.click(function(){
  colorContainers.toggleClass('hidden');
  $(this).text(colorLabel());
});

var css = $("<style type='text/css'></style>").appendTo('head');

colorContainers.find('.color-square').click(function(){
  var color = $(this).attr('class').match(/background-color-([a-f0-9]{6})/i)[1];
  css.text('.highlight { color: #' + color + '; }');
});

//Bookblock clone and setup
var bookBlock = $('.bb-bookblock');
var backCover = bookBlock.parents('.bk-book').find('.bk-cover-back');
var backCoverBookBlock = bookBlock.clone();
backCoverBookBlock.appendTo(backCover);

var...