JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<aside>
    <div class="search-module">
        <h3>Search</h3>
        <label for="search-include">Include</label>
        <input class="search-include" id="" type="text" />
        <label for="search-exclude">Exclude</label>
        <input class="search-exclude" id="" type="text" />
        <h4>Include</h4>
        <ul class="inc"></ul>
        <h4>Exclude</h4>
        <ul class="exc"></ul>
    </div>
    <div class="filters-module">
        <h3>Filters</h3>
        <label for="filters-rating-min">Rating Min</label>
        <input class="filters-rating-min" id="" type="number" value="0"/>
        <label for="filters-rating-max">Rating Max</label>
        <input class="filters-rating-max" id="" type="number" value="5"/>
    </div>
</aside>

<div class="main">
    <h1>Results</h1>
    <div class="results-module">
        
    </div>
</div>

CSS

body {
    font-family: Helvetica;
    background: #eee;
}
aside {
    width: 30%;
    float: left;
}
aside>div {
    margin-bottom: 30px;
    background: white;
}
.main {
    width: 65%;
    float: right;
    background: white;
}

JavaScript

/*
Copyright (c) 2010,2011,2012 Morgan Roderick http://roderick.dk
License: MIT - http://mrgnrdrck.mit-license.org

https://github.com/mroderick/PubSubJS
*/
/*jslint white:true, plusplus:true, stupid:true*/
/*global
	setTimeout,
	module,
	exports,
	define,
	require,
	window
*/

(function(root, factory){
	'use strict';

	// CommonJS
	if (typeof exports === 'object'){
		module.exports = factory();

	// AMD
	} else if (typeof define === 'function' && define.amd){
		define(factory);
	// Browser
	} else {
		root.PubSub = factory();
	}
}( ( typeof window === 'object' && window ) || this, function(){

	'use strict';

	var PubSub = {
			name: 'PubSubJS',
			version: '1.3.9'
		},
		messages = {},
		lastUid = -1;

	/**
	 *	Returns a function that throws the passed exception, for use as argument for setTimeout
	 *	@param { Object } ex An Error object
	 */
	function throwException( ex ){
		return function reThrowException(){
			throw ex;
		};
	}

	function callSubscriberWithDelayedExceptions( subscriber, message, data ){
		try {
			subscriber( message, data );
		} catch( ex ){
			setTimeout( throwException( ex ), 0);
		}
	}

	function callSubscriberWithImmediateExceptions( subscriber, message, data ){
		subscriber( message, data );
	}

	function deliverMessage( originalMessage, matchedMessage, data, immediateExceptions ){
		var subscribers = messages[matchedMessage],
			callSubscriber = immediateExceptions ? callSubscriberWithImmediateExceptions : callSubscriberWithDelayedExceptions,
			i, j;

		if ( !messages.hasOwnProperty( matchedMessage ) ) {
			return;
		}

		// do not cache the length of the subscribers array, as it might change if there are unsubscribtions
		// by subscribers during delivery of a topic
		// see https://github.com/mroderick/PubSubJS/issues/26
		for ( i = 0; i < subscribers.length; i++ ){
			callSubscriber( subscribers[i].func, originalMessage, data );
		}
	}

	function createDeliveryFunction( message, data, immediateExceptions ){
		return function...