JSFiddle - React, Tailwind, and code Playground

by Nikita Polevoy

HTML

<section><div class="blue"></div><div class="blue"></div><div class="red"></div><div class="blue"></div></section>
<section><div class="red"></div><div class="blue"></div><div class="blue"></div><div class="blue"></div></section>
<p>asda</p>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
body {
  line-height: 0;
  font-size: 0;
}
section {
  white-space: nowrap;
}
div {
  width: 25vw;
  height: 50vh;
  display: inline-block;
  position: relative;
  transition: background-color 0.3s ease 0s;
}
.blue {
  background-color: rgba(0,0,255,0.5);
}
.red {
  background-color: rgba(255,0,0,0.5);
}
.blue:hover {
  background-color: rgba(0,0,255,1);
}
.red:hover {
  background-color: rgba(255,0,0,1);
}
p {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 20px;
  top: 40px;
  font-size: 60px;
  color: white;
  font-weight: bold;
  transition: all 1.5s ease 0s;
}
p.active {
  transition: all 0.3s ease 0s;
  visibility: visible;
  opacity: 1;
}

JavaScript

/*! Hammer.JS - v2.0.8 - 2016-04-23
 * http://hammerjs.github.io/
 *
 * Copyright (c) 2016 Jorik Tangelder;
 * Licensed under the MIT license */
!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(b,c,d){var e="DEPRECATED METHOD: "+c+"\n"+d+" AT \n";return function(){var c=new Error("get-stack-trace"),d=c&&c.stack?c.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&la(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==oa?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function s(a){return Array.prototype.slice.call(a,0)}function t(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];r(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ma.length;){if(c=ma[g],e=c?c+f:b,e in a)return e;g++}return d}function v(){return ua++}function w(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function x(a,b){var...