JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<div id="main">
		<div id="search-box">
			<input type="text" name="q" id="search_input"></input>
			<button id="search_button">Search</button>
			<button id="quit_search">Reset</button>
		</div>

		<div id="filters-bar">
			<ul>
				<li>
					<a href="#red">Red</a>
				</li>
				<li>
					<a href="#blue">Blue</a>
				</li>
				<li>
					<a href="#mobile">Mobile</a>
				</li>
				<li>
					<a href="#accessory">Accessory</a>
				</li>
			</ul>
		</div>

		<div id="product-panel">
			<ul>
				<li id="1" data-8088-keyword="red"><img src="" /><p>First</p></li>
				<li id="2" data-8088-keyword="blue"><img src="" /><p>Second</p></li>
				<li id="3" data-8088-keyword="mobile"><img src="" /><p>Third</p></li>
				<li id="4" data-8088-keyword="accessory"><img src="" /><p>Fourth</p></li>
				<li id="5" data-8088-keyword="red mobile"><img src="" /><p>Fifth</p></li>
				<li id="6" data-8088-keyword="blue mobile"><img src="" /><p>Sixth</p></li>
				<li id="7" data-8088-keyword="red accessory"><img src="" /><p>Seventh</p></li>
				<li id="8" data-8088-keyword="blue accessory"><img src="" /><p>Eighth</p></li>
				<li id="9" data-8088-keyword="red blue"><img src="" /><p>Ninth</p></li>
				<li id="10" data-8088-keyword="mobile accessory"><img src="" /><p>Tenth</p></li>
			</ul>
		</div>

		<div id="shopping-cart">
			<ul>

			</ul>
		</div>

	</div>

CSS

body {
	background: #ececec;
	font: 13px/1.5 arial, sans-serif;
}

#main {
	width: 950px;
	margin: auto;
	overflow: hidden;
}
h1, #search-box, #filters-bar {
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
	border-top: 2px solid #474747;
	border-bottom: 2px solid #474747;
}
#filters-bar li {
	display: inline-block;
	padding: 5px 10px 5px 0;
}
#filters-bar li a {
	text-decoration: none;
	font-weight: bold;
	color: #474747;
}
#product-panel {
	float: left;
	width: 588px;
}
#product-panel ul {
	margin: 0;
	padding: 0;
}
#product-panel li {
	list-style-type: none;
	display: inline-block;
	background: #474747;
	border: 1px solid #eee;
	padding: 15px;
	margin: 10px;
}
#product-panel li p {
	margin: 10px 0 0 0;
}
#shopping-cart {
	position: relative;
	float: left;
	background: #ccc;
	height: 300px;
	width: 300px;
	padding: 30px;
	border: 1px solid #474747;
}
#shopping-cart ul {
	list-style-type: none;
	padding: 0;
}
#shopping-cart li {
	padding: 3px;
	margin: 2px 0;
	background: #ececec;
	border: 1px solid #333;
}
#shopping-cart .product-name {
	display: inline-block;
	width: 230px;
}
#shopping-cart .price {
	display: inline-block;
	float: right;
}

#shopping-cart .quantity {
	position: absolute;
	left: 250px;
}

JavaScript

var CORE = (function () {
	var moduleData = {}, // all the modules are stored here
	to_s = function (anything) {
		return Object.prototype.toString.call(anything);
	},
	debug = true;

	return {
		debug: function (on) { // to decide whether log errors in console or send them to server
			debug = on ? true : false;
		},
		register: function (moduleID, creator) {
			//console.log(moduleID);
			var temp;
			if (typeof moduleID === 'string' && typeof creator === 'function') {
				temp = creator(Sandbox.create(this, moduleID));
				if (temp.init && typeof temp.init === 'function' && temp.destroy && typeof temp.destroy === 'function') {
					temp = null;
					moduleData[moduleID] = {
						create: creator,
						instance: null
					};
				} else {
					this.log(1, 'Module ' + moduleID + ' registration failed: instance has not init or destroy functions');
				}
			} else {
				this.log(1, 'Module ' + moduleID + ' registration failed : 1 or more args are of incorrect type.');
			}
		},
		start: function (moduleID) {
			var mod = moduleData[moduleID];
			if (mod) {
				mod.instance = mod.create(Sandbox.create(this, moduleID));
				mod.instance.init();
			}
		},
		startAll: function () {
			var moduleID;
			for (moduleID in moduleData) {
				if (moduleData.hasOwnProperty(moduleID)) {
					this.start(moduleID);
				}
			}
		},
		stop: function (moduleID) {
			var data;
			if (data == moduleData[moduleID] && data.instance) {
				data.instance.destroy();
				data.instance = null;
			} else {
				this.log(1, 'Stop module ' + moduleID + ' Falied: module does not exist or has not been started.');
			}
		},
		stopAll: function () {
			var moduleID;
			for (moduleID in moduleData) {
				if (moduleData.hasOwnProperty(moduleID)) {
					this.stop(moduleID);
				}
			}
		},
		registerEvents: function (evts, mod) {
			if (this.isObj(evts) && mod) {
				if (moduleData[mod]) {
					moduleData[mod].events = evts;
				} else {
					this.log(1, '');
				}
			}
		},
		triggerEvent: function...