JSFiddle - React, Tailwind, and code Playground

by mnadalin

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="gridRow gridHeader">
	<ul>
		<li class="firstColumn">Title</li>
		<li>7.00<br />7.15</li>
		<li>7.15<br />7.30</li>
		<li>7.30<br />7.45</li>
		<li>7.45<br />8.00</li>
		<li>8.00<br />8.15</li>
		<li>8.15<br />8.30</li>
		<li>8.30<br />8.45</li>
		<li>8.45<br />9.00</li>
		<li>9.00<br />9.15</li>
		<li>9.15<br />9.30</li>
		<li>9.30<br />9.45</li>
		<li>9.45<br />10.00</li>
		<li>10.00<br />10.15</li>
		<li>10.15<br />10.30</li>
		<li>10.30<br />10.45</li>
		<li>10.45<br />11.00</li>
		<li>11.00<br />11.15</li>
		<li>11.15<br />11.30</li>
		<li>11.30<br />11.45</li>
		<li>11.45<br />12.00</li>
	</ul>
</div>

<div class="gridRow gridBody row1">
	<ul>
		<li class="firstColumn">A</li>
        <li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
		<li class="slot"></li>
	</ul>
</div>

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

.gridRow {
	clear:left;
}

.gridRow * {
	margin:0;
	padding:0;
}

.gridRow ul {
	list-style-type:none;
	height:24px;
}

.gridRow li {
	display:inline;
	float:left;
	width:32px;
	height:24px;
	line-height:24px;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

.gridRow li.firstColumn {
	border-left:0;
	width:50px;
	text-align:left;
	text-indent:2px;
}

.gridRow li.over {
	background-color:#f4f4f4;
}

.gridHeader li {
	height:24px;
	text-align:center;
	line-height:12px;
	background: -webkit-linear-gradient(bottom, #fcfcfc , #e0e0e0); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom, #fcfcfc, #e0e0e0); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom, #fcfcfc, #e0e0e0); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, #fcfcfc , #e0e0e0); /* Standard syntax */
}

.gridHeader li.firstColumn {
	line-height:24px;
}

.box {
	width:30px;
	height:22px;
	background:#3db9d3;
	border:1px solid #2898b0;
}

JavaScript

$('.gridBody li.slot').click(function() {
    if ($(this).children().length > 0) return;
    $(this).append('<div class="box"></div>');
    $(this).children().resizable({
        handles: 'e',
        minHeight: 22,
        maxHeight: 22,
        minWidth: 30,
        handles: 'w, e'
    });
    $(this).children().resizable('option', 'grid', [ 33, 1 ]);
});