JSFiddle - React, Tailwind, and code Playground

by chrimbus

HTML

<div id="ex1">
  <p>Quis nostrud exercitation consectetur adipisicing elit, sed do eiusmod tempor incididunt. Velit esse cillum dolore ut enim ad minim veniam, ullamco laboris nisi. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa in reprehenderit in voluptate.</p>
  <p>Qui officia deserunt sed do eiusmod tempor incididunt ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Cupidatat non proident, ullamco laboris nisi. Consectetur adipisicing elit, ullamco laboris nisi ut enim ad minim veniam.</p>
  <p>Eu fugiat nulla pariatur. Qui officia deserunt quis nostrud exercitation excepteur sint occaecat. Duis aute irure dolor velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, ullamco laboris nisi qui officia deserunt.</p>
  <p>Consectetur adipisicing elit, duis aute irure dolor sunt in culpa. Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt duis aute irure dolor ullamco laboris nisi.</p>
  <p>Quis nostrud exercitation cupidatat non proident, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt excepteur sint occaecat ut aliquip ex ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation consectetur adipisicing elit.</p>
</div>

CSS

div {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

JavaScript

// CSS3MultiColumn - a javascript implementation of the CSS3 multi-column module
// v1.02 beta - Jan 08 2008
// Copyright (c) 2005 Cdric Savarese <[email protected]>
// This software is licensed under the CC-GNU LGPL <http://creativecommons.org/licenses/LGPL/2.1/>

// For additional information, see : http://www.csscripting.com/

// Supported Properties: 
// column-count 
// column-width	
// column-gap
// column-rule

// Unsupported Properties: 
// column-rule-width (use column-rule instead)
// column-rule-style (use column-rule instead)
// column-rule-color (use column-rule instead)
// column-span
// column-width-policy
// column-space-distribution


function CSS3MultiColumn() {
	// alert('Development Version');
	var cssCache = new Object();
	var splitableTags = new Array('P','DIV', 'SPAN', 'BLOCKQUOTE','ADDRESS','PRE', 'A', 'EM', 'I', 'STRONG', 'B', 'CITE', 'OL', 'UL', 'LI' );
	var pseudoCSSRules = new Object();
	var ut = new CSS3Utility();

	var debug = ut.debug;
	if(document.location.search.match('mode=debug')) var isDebug = true;
	else var isDebug = false;
	isDebug = true;
		
	var bestSplitPoint = null; 
	var secondSplitPoint = null;
	var secondSplitBottom = 0;
	var documentReady = false;
	
	// INITIALIZATION
	ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true;  processElements(); } );
	loadStylesheets();
	
	// CSS PARSING
	// --------------------------------------------------------------------------------------
	// loadStylesheets: 
	// Loop through the stylesheets collection and load the css text into the cssCache object	
	function loadStylesheets() {
		if(document.styleSheets) {	// Firefox & IE
			// initialize cache
			for(var i=0;i < document.styleSheets.length;i++) {			
				cssCache[document.styleSheets[i].href] = false;
			}
			// load css in the cache			
			for(var i=0;i < document.styleSheets.length;i++) {						
				loadCssCache(document.styleSheets[i], 'parseStylesheets');
			}
		} else if (document.getElementsByTagName) {...