JSFiddle - React, Tailwind, and code Playground

by Laurens Maneschijn

HTML

<body>
<textarea id="ta" cols="80" rows="10">
test
--change div contents by typing in textarea --
eol
</textarea><br/>

snap size to 40x40 chuncks:<br>
<div id="div"></div>
</body>

CSS

#div{
    display:inline-block;
    white-space:pre;
    outline:1px solid #00f;
    background-color:#ddd;
    background-image:url('http://imgh.us/grid.svg'); /* 80x80*/
}

JavaScript

$(function(){
    $('#ta').bind('change keyup', function(e){
        $('#div').height('').width('');
        $('#div').html(this.value);
        $('#div').height(function(i, h) { return Math.ceil(h / 40) * 40; });
        $('#div').width( function(i, w) { return Math.ceil(w / 40) * 40; });
    });
    $('#ta').change();
});