JSFiddle - React, Tailwind, and code Playground
HTML
<div id="console"></div>
JavaScript
var logger = {
log: function (text){
var _console = document.getElementById('console');
_console.innerHTML = _console.innerHTML + '<br />' + text;
}
};
var windowWidth = window.innerWidth;
var tempGroupSize = 0,
currentBreakPage = 0,
iterator = '';
logger.log('win' + windowWidth);
var data = [{
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height": 1027,
"isPortrait": false
}
},
"ratio": 0.7000350017500875,
"pageGroup": []
}, {
"size": {
"original": {
"height": 2857,
"width": 2000
},
"updated": {
"width": 718.9359467973399,
"height":...