JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- dev markup -->
<div class="resource-category">
	<ul class="resource-menu">
		<li>
			<a href="#_ssiwdfucmaccordionSearch_WAR_ssiwdfucm_INSTANCE_UB4v_-0">Certificate of Achievement</a>
		</li>
		<li>
			<a href="#_ssiwdfucmaccordionSearch_WAR_ssiwdfucm_INSTANCE_UB4v_-1">Intermediate Family Resources</a>
		</li>
		<li>
			<a href="#_ssiwdfucmaccordionSearch_WAR_ssiwdfucm_INSTANCE_UB4v_-2">Teacher Guide-Blackline Master</a>
		</li>
		<li>
			<a href="#_ssiwdfucmaccordionSearch_WAR_ssiwdfucm_INSTANCE_UB4v_-3">Worktext Projectable Forms</a>
		</li>
	</ul>
	<div class="categories">
		<div class="resource" id="_ssiwdfucmaccordionSearch_WAR_ssiwdfucm_INSTANCE_UB4v_-0">
			<h2>
				Certificate of Achievement
			</h2>
			<table class="resource-header">
				<tbody>
					<tr>
						<th>
							Title / Description
						</th>
						<th>
							Date Uploaded
						</th>
						<th>
							File Type / Download
						</th>
					</tr>
				</tbody>
			</table>
			<ul class="accordion">
				<li>
					<h3>
						Certificate of Achievement
					</h3>
					<table class="resource-detail">
						<tbody>
							<tr class="">
								<td class="descr">
									<h4>
										Certificate of Achievement – Grade 3
									</h4>
									<p>
										A downloadable, fillable PDF of the student Certificate of Achievement from page 72 of the Teacher's Guide.
									</p>
								</td>
								<td class="image">
									<a href="/delegate/ssi-wdf-ucm-webContent?dDocName=Y929452"><img src="/ssi-wdf-ucm/webContent/groups/public/@guestmktgpremier/documents/webcontent/y929452@t~1.jpg" /></a>
								</td>
								<td class="date">
									2013-06-11
								</td>
								<td class="download">
									<div class="type">
										<span class="intro">Type:</span>PDF
									</div>
									<div class="download">
										<a...

JavaScript

/*

 * jQuery UI @VERSION

 *

 * Copyright (c) 2008 Paul Bakaus (ui.jquery.com)

 * Dual licensed under the MIT (MIT-LICENSE.txt)

 * and GPL (GPL-LICENSE.txt) licenses.

 *

 * http://docs.jquery.com/UI

 */

;(function($) {



// This adds a selector to check if data exists.

jQuery.extend(jQuery.expr[':'], { 

	data: "jQuery.data(a, m[3])"

});



$.ui = {

	plugin: {

		add: function(module, option, set) {

			var proto = $.ui[module].prototype;

			for(var i in set) {

				proto.plugins[i] = proto.plugins[i] || [];

				proto.plugins[i].push([option, set[i]]);

			}

		},

		call: function(instance, name, args) {

			var set = instance.plugins[name];

			if(!set) { return; }

			

			for (var i = 0; i < set.length; i++) {

				if (instance.options[set[i][0]]) {

					set[i][1].apply(instance.element, args);

				}

			}

		}	

	},

	cssCache: {},

	css: function(name) {

		if ($.ui.cssCache[name]) { return $.ui.cssCache[name]; }

		var tmp = $('<div class="ui-gen">').addClass(name).css({position:'absolute', top:'-5000px', left:'-5000px', display:'block'}).appendTo('body');

		

		//if (!$.browser.safari)

			//tmp.appendTo('body'); 

		

		//Opera and Safari set width and height to 0px instead of auto

		//Safari returns rgba(0,0,0,0) when bgcolor is not set

		$.ui.cssCache[name] = !!(

			(!(/auto|default/).test(tmp.css('cursor')) || (/^[1-9]/).test(tmp.css('height')) || (/^[1-9]/).test(tmp.css('width')) || 

			!(/none/).test(tmp.css('backgroundImage')) || !(/transparent|rgba\(0, 0, 0, 0\)/).test(tmp.css('backgroundColor')))

		);

		try { $('body').get(0).removeChild(tmp.get(0));	} catch(e){}

		return $.ui.cssCache[name];

	},

	disableSelection: function(el) {

		$(el).attr('unselectable', 'on').css('MozUserSelect', 'none');

	},

	enableSelection: function(el) {

		$(el).attr('unselectable', 'off').css('MozUserSelect', '');

	},

	hasScroll: function(e, a) {

		var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',

			has = false;

		

		if...