JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<div id="columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac ultrices purus. Vivamus congue porttitor posuere. Duis nec nulla vitae mi vehicula rutrum quis sit amet libero. Duis vel arcu eget lorem fringilla viverra in ac nulla. Vestibulum mattis lacus quis ligula semper at sollicitudin lacus consequat. Sed posuere dolor non libero pellentesque lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas molestie ipsum nec sem molestie vitae lacinia leo placerat. Quisque facilisis mauris sed libero tempor tincidunt. Praesent mollis tempor odio in facilisis. Praesent leo nunc, eleifend ultricies facilisis id, bibendum sed urna.

Mauris mattis, nibh a cursus luctus, neque diam condimentum eros, vitae condimentum quam augue ut tortor. In bibendum dictum scelerisque. Etiam massa elit, cursus convallis feugiat ac, venenatis a lacus. Aliquam sit amet enim arcu, sit amet pharetra purus. Phasellus ac justo lacus. Vivamus euismod commodo neque nec egestas. In et quam et quam cursus molestie sed eu enim. Donec semper fringilla augue, a auctor tellus placerat sit amet. Vivamus quis ultricies nibh. Aliquam erat volutpat. Integer fringilla fringilla urna, ac lacinia leo cursus sit amet. Proin eu turpis mauris, fringilla feugiat est. Suspendisse dignissim pharetra sapien in venenatis. Cras a elit nibh. Sed sagittis viverra varius. Nulla porttitor luctus tincidunt. Vestibulum a diam elit, ut interdum turpis.

Maecenas fringilla venenatis lobortis. Nulla imperdiet ipsum nibh, sed laoreet justo. Nam id diam quis urna scelerisque porta vel sit amet tortor. Curabitur quam nibh, venenatis in placerat sed, porta et elit. Morbi a dolor mi. Nam sit amet elit ut nulla elementum semper. Nullam luctus bibendum arcu id aliquet. Maecenas suscipit adipiscing massa, sit amet bibendum nunc tincidunt non. Phasellus gravida porta leo, nec placerat risus imperdiet sit amet. Nullam a tristique nisi. Pellentesque placerat...

JavaScript

window.addEventListener(function() {
bodyID = document.getElementById('columns');
bodyID.style.width = 500;
totalHeight = bodyID.offsetHeight;
pageCount = Math.ceil(totalHeight/desiredHeight);
bodyID.style.width = desiredWidth*pageCount;
bodyID.style.height = 500;
bodyID.style.webkitColumnGap = 0;
bodyID.style.webkitColumnCount = pageCount;
},false);