JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900"></script>
<header>
    <div id="slidr">
        <div class="value">0.3</div>
        <div class="bar"><div class="handle"></div></div>
    </div>
    <div id="news"></div>
</header>
 <div id='main'>
    <article>
        <h1>Messages</h1>
        <div class="wrap">
            <div id="top">
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
                <div class="item">Item</div>
            </div>
        </div>
        <p>Content should flow below this. Good point!</p>
     </article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>

CSS

body {
    font: Raleway;
    font-weight: 200;
}
h2 {
    margin: 0 0 12px 0;
    font-weight: 100;
}
p {
    font-weight: 100;
}
#top {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-content: flex-start;
    -webkit-align-items: flex-start;
    xtransform: scale(1) ;
    xtransform-origin: top left;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(99, 99, 99, 0.5);
    padding: 0;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 4px;
    border-radius: 4px;
    overflow: scroll;
    xwidth: 100%;
    height: 300px;
    min-width: 200px;
    min-height: 300px;
}
.wrap {
    xborder-right: 1px solid white;
    xborder-bottom: 1px solid white;
    margin: 0.6em;
    display: block;
}
.item {
    order: inherit;
    flex: 0 2 32%;
    -webkit-order: inherit;
    -webkit-flex: 0 2 32%;
    width: 150px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    border-collapse: collapse;
    padding: 14px;
    margin: 10px;
    transform-origin: top left;
    transform: scale(0.6);
    -webkit-transform-origin: top left;
    -webkit-transform: scale(0.6);
}
p {
    margin: 0;
    border: 1px solid green;
}
body {
   font: 14px Raleway;
   background: #999999;
  }

  #main {
   min-height: 400px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
  ...

JavaScript

var height = $('#top').outerHeight();
var width = $('#top').outerWidth();
var topRect = $('#top')[0].getBoundingClientRect();

$('<div>').addClass('h').html(height).appendTo('#news');
$('<div>').addClass('w').html(topRect.height).appendTo('#news');
$('#top').css('height', height + 'px');
$('#top').css('width', width + 'px');
$('.wrap')[0].style.height = (topRect.height) + 'px';
$('.wrap')[0].style.width = (topRect.width) + 'px';

var scale = 1;
var precision = 1;
var resizeWhenNeeded = {
    toid: null,
    scale: scale
};

$('.item').each(function (i) {
    $(this).wrap('<div class="wrap"></div>');
    $(this).html('');
    $('<h2>').html('Message ' + i).appendTo(this);
    $('<p>').html('All good things go well.').appendTo(this);
});

function scaleTop() {

    if (resizeWhenNeeded.toid) {
        clearTimeout(resizeWhenNeeded.toid);
        resizeWhenNeeded.toid = null;
    }

    $('.item').each(function (i) {
        
        $(this).css({
            transform: 'scale(' + scale + ')',
            '-webkit-transform': 'scale(' + scale + ')'
        }).parent().css({
            margin: scale + 'em'
        });
    
    });

    $('.item').each(function () {
        var height = $(this).outerHeight();
        var width = $(this).outerWidth();
        var topRect = $(this)[0].getBoundingClientRect();
        var wheight = topRect.height;
        var wwidth = topRect.width;
    
        if (height > 70) {
            height = 70;
        }
        if (width > 180) {
            width = 180;
        }

        if (wheight > (scale * height)) {
            wheight = (scale * height);
        }
        if (wwidth > (scale * width)) {
            wwidth = (scale * width);
        }
        
        height = Number(height).toFixed(precision);
        width = Number(width).toFixed(precision);
        wheight = Number(wheight).toFixed(precision);
        wwidth = Number(wwidth).toFixed(precision);
        
        $('#news .h').html(height + ', ' + wheight);
       ...