JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<!-- NOTE: this is a basic text layout test -->
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

CSS

body {
    margin: 0 0;
}
.words {
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(.5);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(.5);
    transform-origin: 0 0;
    transform: scale(.5);
}
.word {
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: 0% 0%;
    -moz-backface-visibility: hidden;
    -moz-transform-origin: 0% 0%;
    backface-visibility: hidden;
    transform-origin: 0% 0%;
    position: absolute;
    text-align: center;
    display: table; 
    /*background: rgba(0,0,0,.05);*/
}
.word > div {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
    opacity: .3;
    transition: all 200ms ease-out;
    color: black !important;
}
.word:hover > div {
    opacity: 1;
    color: inherit !important;
}

JavaScript

function createBoundedWord(word, orientation, x, y, w, h, font, fontSize, color) {
    var element = document.createElement('div');

    if (orientation === 'v') {
       element.style.cssText = '-webkit-transform: translate3d(' + x + 'px,' + ((y+w) - (w - h)) + 'px, 0) rotate(270deg); -moz-transform: translate3d(' + x + 'px,' + ((y+w) - (w - h)) + 'px, 0) rotate(270deg); transform: translate3d(' + x + 'px,' + ((y+w) - (w - h)) + 'px, 0) rotate(270deg); width: ' + h  + 'px; height: ' + w + 'px; color: ' + color + ';';
    } else {
        element.style.cssText = '-webkit-transform: translate3d(' + x + 'px, ' + y + 'px, 0); -moz-transform: translate3d(' + x + 'px, ' + y + 'px, 0); transform: translate3d(' + x + 'px, ' + y + 'px, 0); width: ' + w  + 'px; height: ' + h + 'px; color: ' + color + '; transform-origin: 0 0;';
    }
    element.className = 'word';
    element.innerHTML = '<div style="font-family: ' + font + '; font-size: ' + fontSize + 'px; display: table-cell; vertical-align: middle;">' + word  + '</div>';
    return element;
}

var words =  [{"word":"love","orientation":"v","fontSize":"710","fontFamily":"Trebuchet MS","x":320,"y":20,"w":828,"h":1431},{"word":"life","orientation":"v","fontSize":"360","fontFamily":"Open Sans Condensed","x":188,"y":480,"w":420,"h":555},{"word":"weekend","orientation":"v","fontSize":"280","fontFamily":"Trebuchet MS","x":997,"y":156,"w":326,"h":1160},{"word":"tired","orientation":"h","fontSize":"250","fontFamily":"Helvetica","x":41,"y":340.5,"w":570,"h":291},{"word":"loves","orientation":"h","fontSize":"240","fontFamily":"Lato","x":16,"y":72,"w":588,"h":280},{"word":"wait","orientation":"v","fontSize":"230","fontFamily":"Open Sans...