JSFiddle - React, Tailwind, and code Playground

by PhillipSenn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<main role="main" class="container">
<div class="boardRow">
<span class="top cell first"><span class="player">&#9820;</span></span>
<span class="top cell"><span class="player">&#9822;</span></span>
<span class="top cell"><span class="player">&#9821;</span></span>
<span class="top cell"><span class="player">&#9819;</span></span>
<span class="top cell"><span class="player">&#9818;</span></span>
<span class="top cell"><span class="player">&#9821;</span></span>
<span class="top cell"><span class="player">&#9822;</span></span>
<span class="top cell"><span class="player">&#9820;</span></span>
</div>
<div class="boardRow">
<span class="cell first"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
<span class="cell"><span class="player">&#9823;</span></span>
</div>
<div class="boardRow">
<span class="cell first">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
</div>
<div class="boardRow">
<span class="cell first">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span class="cell">&nbsp;</span>
<span...

CSS

.cell {
	position: relative;
	z-index:0;
}
.player {
	position: relative;
	z-index:1;
	cursor:pointer;
}

main {
	font-size:25px;
}
.boardRow {
	border-left:3px solid #000;
	clear:left;
}
.top {
	border-top:1px solid #000;
}
.cell {
	float:left;
	width:3em;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	text-align:center;
	vertical-align:middle; /* Doesn't work */
}
.first {
	border-left:1px solid #000;
}

JavaScript

(function() {
	$('.player').draggable()
})()