JSFiddle - React, Tailwind, and code Playground

by corin

HTML

<script src="http://www.logic-puzzles.org/json.js"></script>
<link rel="stylesheet" href="http://www.logic-puzzles.org/stylesheets/sky-blue.css">
<script src="https://tbwebframework.googlecode.com/svn-history/r248/trunk/WebsiteFramework_src/WebSite/JScript/WebToolKit/WebToolKit.MD5.js"></script>
<div id="content_wrapper_sbr">
		<!-- Content Area -->
		<div id="content">
			<!-- Content Box -->
			<div class="cbox" unselectable="on">



<!-------------------------------------------->






<div>

<!-- GAME BOARD START -->

<table border="0" cellspacing="0" cellpadding="0" id="puzzletable" align="center">
<tbody><tr>
	<td class="grid0"></td>
	<td class="grid0"></td>
	
	<td class="gridheadertop" colspan="10">Diner</td>
	
	<td class="gridheadertop" colspan="10">Meals</td>
	
	<td class="gridheadertop" colspan="10">Drinks</td>
</tr>
<tr>
	<td class="grid0"></td>
	<td class="grid0"></td>
	<td class="gridlinev2"><img src="http://www.logic-puzzles.org/blank.gif" width="2" height="1" alt="" border="0"></td>
	
	<td class="gridlinev"><img src="http://www.logic-puzzles.org/blank.gif" width="1" height="1" alt="" border="0"></td>
	
	<td class="labelboxv" id="labeltopB1"><svg height="125" version="1.1" width="16" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><text x="-35" y="80" text-anchor="start" font="bold 13px 'Helvetica'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: bold; font-size: 13px; line-height: normal; font-family: Helvetica;" transform="matrix(0,-1,1,0,-72,88)"><tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="4.5078125">Malory Archer</tspan></text></svg></td>
	
	<td class="gridlinev"><img src="http://www.logic-puzzles.org/blank.gif" width="1"...

CSS

#puzzletable tr td {
	font-family: Arial, Helvetica, Verdana;
	font-size: 12px;
	color: black;
}

.highlighted {
	background-color: #fffb9b !important;
}

.highlightbg {
	background-color: #e3ebff !important;
}

.hidden {
	display: none;
}

.gridbox {
	width: 32px;
	height: 32px;
	background-color: white;
}

.vlabel {
	background-color: black;
	width: 22px;
	color: white !important;
	text-align: center;
	line-height: 22px;
}

.hlabel {
	background-color: black;
	width: 22px;
	text-align: center;
}

.markedtrue {
	background-image: url('http://www.logic-puzzles.org/images/grid-icons/v1/circle28.png');
	background-position:center center; 
	background-repeat:no-repeat;
	background-size:28px 28px;
} 

.markedfalse {
	background-image: url('http://www.logic-puzzles.org/images/grid-icons/v1/x28.png');
	background-position:center center; 
	background-repeat:no-repeat;
	background-size:28px 28px;
} 

.labelboxh {
	width: 100px;
	height: 32px;
	background-color: white;
	line-height: 32px;
	padding-right: 4px;
	text-align: right;
	font-weight: bold;
}

.labelboxv {
	height: 125px;
	width: 32px;
	background-color: white;
	text-align: center;
}

.vlabeltableB { 
	border-left: 2px solid black;
}

.vlabeltableD { 
	border-right: 1px solid black;
}

.hlabeltableA { 
	border-top: 2px solid black;
}

.hlabeltableD { 

}

.hlabeltableC { 
	border-bottom: 1px solid black;
}

.subtableAB { 
	border-left: 1px solid black;
	border-top: 1px solid black;
}
.subtableAC {
	border-top: 1px solid black;
}
.subtableAD { 
	border-top: 1px solid black;
	border-right: 1px solid black;
}
.subtableDB { 
	border-left: 1px solid black;
}
.subtableDC { 

}
.subtableCB { 
	border-left: 1px solid black;
	border-bottom: 1px solid black;
}

.td2 {
	border-top: 1px solid black;
	border-left: 1px solid black;
}

.td3 {
	border-top: 1px solid black;
}

.td4 {
	border-left: 1px solid black;
}

.clueHighlighted {
	background-color: yellow;
}


.boxHighlighted {
	background-color:...

JavaScript

jQuery('#submit_button').click(function(option) {
        var ans = MD5(jQuery('#answergrid').text().replace(/\s/g, ''));
    if(ans.slice(3)=="7a3fad47440bbc61b930ccdc3a17f") {
      jQuery('#congrats').replaceWith('<div id="congrats">That was tricky! Are you sure you want to continue? Well, I can&#39;t stop you, I hope you&#39;re ready: <a href="http://tiny.cc/'+ans.slice(0, 3)+'">http://tiny.cc/'+ans.slice(0, 3)+'</a></div>')
    } else { alert("Noooope!"); }
});

var labelb_ary = new Array();
labelb_ary[0] = "Malory Archer";
labelb_ary[1] = "Pam Poovey";
labelb_ary[2] = "Sterling Archer";
labelb_ary[3] = "Woodhouse";
var labelc_ary = new Array();
labelc_ary[0] = "Crack Yoghurt";
labelc_ary[1] = "Stale Bread";
labelc_ary[2] = "Steak and Eggs";
labelc_ary[3] = "Caesar Salad";
var labeld_ary = new Array();
labeld_ary[0] = "Shandy";
labeld_ary[1] = "Scotch";
labeld_ary[2] = "Malcolm X Tea";
labeld_ary[3] = "Bloody Mary";

var map1 = new Array();
var map2 = new Array();
map1[0] = "A1B1";map2['A1B1'] = 0;map1[1] = "A1B2";map2['A1B2'] = 1;map1[2] = "A1B3";map2['A1B3'] = 2;map1[3] = "A1B4";map2['A1B4'] = 3;map1[4] = "A2B1";map2['A2B1'] = 4;map1[5] = "A2B2";map2['A2B2'] = 5;map1[6] = "A2B3";map2['A2B3'] = 6;map1[7] = "A2B4";map2['A2B4'] = 7;map1[8] = "A3B1";map2['A3B1'] = 8;map1[9] = "A3B2";map2['A3B2'] = 9;map1[10] = "A3B3";map2['A3B3'] = 10;map1[11] = "A3B4";map2['A3B4'] = 11;map1[12] = "A4B1";map2['A4B1'] = 12;map1[13] = "A4B2";map2['A4B2'] = 13;map1[14] = "A4B3";map2['A4B3'] = 14;map1[15] = "A4B4";map2['A4B4'] = 15;map1[16] = "A1C1";map2['A1C1'] = 16;map1[17] = "A1C2";map2['A1C2'] = 17;map1[18] = "A1C3";map2['A1C3'] = 18;map1[19] = "A1C4";map2['A1C4'] = 19;map1[20] = "A2C1";map2['A2C1'] = 20;map1[21] = "A2C2";map2['A2C2'] = 21;map1[22] = "A2C3";map2['A2C3'] = 22;map1[23] = "A2C4";map2['A2C4'] = 23;map1[24] = "A3C1";map2['A3C1'] = 24;map1[25] = "A3C2";map2['A3C2'] = 25;map1[26] = "A3C3";map2['A3C3'] = 26;map1[27] = "A3C4";map2['A3C4'] = 27;map1[28] =...