JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The City Record Print Preview</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/typography.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/grid816.css" rel="stylesheet" type="text/css" media="screen"/>

</head>

<body id="the-city-record">

<div class="container_12 page_template">
    <div id="masterhead"><!--<img src="images/cr-masthead.png" width="684" height="83" alt="The City Record" />--></div>
<!--    <div class="cr-subhead-main">
        <div id="cr-volnum" class="grid_4"><span>CXXXVIII number 99</span></div>
        <div id="cr-date" class="grid_4"><span>Monday, May 23, 2011</span></div>
        <div id="cr-price" class="grid_4"><span>PRICE $4.00</span></div>
        <div class="clear"></div> 
    </div>
    <div class="cr-subhead-page-even">
        <div class="grid_4 txtleft"><span class="page-num">Page: </span></div>
        <div class="grid_4 txtcenter"><span >The City Record</span></div>
        <div class="grid_4 txtright"><span class="record-date">Monday, May 2011</span></div>
    </div>
    <div class="cr-subhead-page-odd">
        <div class="grid_4 txtleft"><span class="record-date">Monday, May 2011</span></div>
        <div class="grid_4 txtcenter"><span>The City Record</span></div>
        <div class="grid_4 txtright"><span class="page-num">Page: </span></div>
    </div>-->
    <div class='content'></div>
</div>


<div id="newspaper-data">
    <img src="images/cr-masthead.png" width="684" height="83" alt="The City Record" />
  <div class="cr-table-contents">    
        <table>
            <caption>Table of Contents</caption> 
          <thead>
              <tr>
                <th scope="col" colspan="2"><h6>Public...

CSS

@import url(../css/reset.css);
@import url(../css/grid.css);
@import url(../css/jquery-ui-1.8.14.custom.css);
@import url(../SpryAssets/SpryValidationTextField.css);
@import url(../SpryAssets/SpryValidationSelect.css);
@import url(../SpryAssets/SpryValidationTextarea.css);

/* CSS Document Screen*/
/*
Contents -------

LAYOUT
ICONS
PUBLICATION PREVIEW
MARGIN CLASSES
FLOAT CLASSES 
COLOR CLASSES
FORM
LISTS
TEXT ELEMENTS
FORMS
CALENDAR
FORM VALIDATION
JQUERY UI
TABLES
*/
/* LAYOUT */
#logo {
width:auto;
overflow:hidden;
}

/*News Paper Styles*/
#cr-masterhead {
text-align:center;
margin:20px 0 10px 0;
}

.cr-subhead-main, .cr-subhead-page-even, .cr-subhead-page-odd {
background-color:#333;
border-bottom:1px dashed;
border-top:1px dashed;
color:#CCC;
float:left;
padding:5px 0;
width:100%;
margin:0px 0 5px 0;
}



#cr-masterhead img {
text-align:center;
}

#cr-date {
text-align:center;
}

#cr-price {
text-align:right;
}

.cr-table-contents {margin:0px 0;}

.cr-table-contents table {width:100%;}

.cr-table-contents table td {margin-bottom:20px;}

.cr-table-contents table td+td{text-align:right;}

.cr-table-contents table td:hover {color:#666;}

.cr-table-contents table th:hover {color:#666;}

.pub-date em:hover {
color:#111;
}

.article-section .crol-sec {
margin:10px 0 10px 0;
}

/* End of Newspaper styles */

#nav {
background-color:#333;
box-shadow:-1px 3px 3px #888;
}

#side-nav {
position:absolute;
top:30px;
}

#criteria-box {
border:1px solid #AAA;
padding:6px;
width:500px;
margin-bottom:10px;
}

.nav-content {
position:absolute;
bottom:0;
background-color:#EEE;
height:250px;
width:141px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}

.footer {
background-color:#666;
}

.footer .bar {
background-color:#333;
height:1.125em;
margin:0;
border:none;
box-shadow:0 1px 3px #000;
}

.footer .content {
padding:.625em;
}

.footer img {
margin-top:.5em;
margin-left:.5em;
}

/* ICONS */
.vui-icon {
background-repeat:no-repeat;
background-position:left...

JavaScript

(function($){$.fn.columnize=function(options){var defaults={width:400,columns:false,buildOnce:false,overflow:false,doneFunc:function(){},target:false,ignoreImageLoading:true,columnFloat:"left",lastNeverTallest:false,accuracy:false};var options=$.extend(defaults,options);if(typeof(options.width)=="string"){options.width=parseInt(options.width);if(isNaN(options.width)){options.width=defaults.width;}}
return this.each(function(){var $inBox=options.target?$(options.target):$(this);var maxHeight=$(this).height();var $cache=$('<div></div>');var lastWidth=0;var columnizing=false;var adjustment=0;$cache.append($(this).contents().clone(true));if(!options.ignoreImageLoading&&!options.target){if(!$inBox.data("imageLoaded")){$inBox.data("imageLoaded",true);if($(this).find("img").length>0){var func=function($inBox,$cache){return function(){if(!$inBox.data("firstImageLoaded")){$inBox.data("firstImageLoaded","true");$inBox.empty().append($cache.children().clone(true));$inBox.columnize(options);}}}($(this),$cache);$(this).find("img").one("load",func);$(this).find("img").one("abort",func);return;}}}
$inBox.empty();columnizeIt();if(!options.buildOnce){$(window).resize(function(){if(!options.buildOnce&&$.browser.msie){if($inBox.data("timeout")){clearTimeout($inBox.data("timeout"));}
$inBox.data("timeout",setTimeout(columnizeIt,200));}else if(!options.buildOnce){columnizeIt();}else{}});}
function columnize($putInHere,$pullOutHere,$parentColumn,height){while($parentColumn.height()<height&&$pullOutHere[0].childNodes.length){$putInHere.append($pullOutHere[0].childNodes[0]);}
if($putInHere[0].childNodes.length==0)return;var kids=$putInHere[0].childNodes;var lastKid=kids[kids.length-1];$putInHere[0].removeChild(lastKid);var $item=$(lastKid);if($item[0].nodeType==3){var oText=$item[0].nodeValue;var counter2=options.width/18;if(options.accuracy)
counter2=options.accuracy;var columnText;var latestTextNode=null;while($parentColumn.height()<height&&oText.length){if(oText.indexOf('...