JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://rawgithub.com/RactiveJS/Ractive/master/release/0.3.9/Ractive.min.js"></script>
<script id='tpl' type='text/ractive'>
    <div class='max'>
        <p>The dimensions of this &lt;div&gt; are <strong>{{width}}</strong>x<strong>{{height}}</strong>px</p>
        <p>therefore the area is</p>
        <p><strong class='large'>{{width*height}}px<sup>2</sup></strong></p>
    </div>
</script>

<div id='container'></div>

CSS

html, body, #container {
    position: relative;
    height: 100%;
    font-family: 'Arial';
    margin: 0;
}

body {
    padding: 1em;
    box-sizing: border-box;
}

.max {
    position: absolute;
    background-color: rgb(240,210,210);
    padding: 1em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50%;
    box-sizing: border-box;
    overflow: auto;
}

.large {
    font-size: 2em;
}

JavaScript

var ractive = new Ractive({
    el: 'container',
    template: '#tpl'
});

var div = ractive.find( 'div' );

resizeHandler = function () {
    ractive.set({
        width: div.clientWidth,
        height: div.clientHeight
    });
};

window.addEventListener( 'resize', resizeHandler, false );
resizeHandler(); // initialise