JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<script src="https://rawgithub.com/postaljs/postal.js/master/lib/postal.js"></script>
<div>Example 1 - A Simple Subscription
  <div class="results" id="example1"></div>
</div>
<div>Example 2 - Subscribing with the "*" wildcard character
  <ul class="results"
  id="example2"></ul>
</div>
<div>Example 3 - Subscribing with the "#" wildcard character
  <ul class="results"
  id="example3"></ul>
</div>
<div>Example 4 - using distinctUntilChanged()
  <ul class="results" id="example4"></ul>
</div>
<div>Example 5 - using disposeAfter(X)
  <ul class="results" id="example5"></ul>
</div>
<div>Example 6 - using withConstraint() to apply a predicate to subscription
  callback
  <ul class="results" id="example6"></ul>
</div>
<div>Example 7 - using withContext to set the "this" context
  <ul class="results"
  id="example7"></ul>
</div>
<div>Example 8 - using withDelay to delay evaluation of subscription
  <ul class="results"
  id="example8"></ul>
</div>
<div>Example 9 - using distinct to ignore any duplicate messages
  <ul class="results"
  id="example9"></ul>
</div>

CSS

div {
  font-family: Tahoma, Arial;
  font-size: 10pt;
}
.results {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1pt solid lightsteelblue;
}

JavaScript

// This gets you a handle to the default postal channel...
// For grins, you can get a named channel instead like this:
// var channel = postal.channel( 'DoctorWho' );
var channel = postal.channel();
// subscribe to 'name.change' topics
var subscription = channel.subscribe( "name.change", function ( data ) {
	$( "#example1" ).html( "Name: " + data.name );
} );
// And someone publishes a name change:
channel.publish( "name.change", { name : "Dr. Who" } );
// To unsubscribe, you:
subscription.unsubscribe();


// Subscribing to a wildcard topic using *
// The * symbol represents "one word" in a topic (i.e - the text between two periods of a topic).
// By subscribing to "*.changed", the binding will match
// name.changed & location.changed but *not* changed.companion
var chgSubscription = channel.subscribe( "*.changed", function ( data ) {
	$( "<li>" + data.type + " changed: " + data.value + "</li>" ).appendTo( "#example2" );
} );
channel.publish( "name.changed",     { type : "Name",     value : "John Smith" } );
channel.publish( "location.changed", { type : "Location", value : "Early 20th Century England" } );
chgSubscription.unsubscribe();


// Subscribing to a wildcard topic using #
// The # symbol represents 0-n number of characters/words in a topic string.
// By subscribing to "DrWho.#.Changed", the binding will match
// DrWho.NinthDoctor.Companion.Changed & DrWho.Location.Changed but *not* Changed
var starSubscription = channel.subscribe( "DrWho.#.Changed", function ( data ) {
	$( "<li>" + data.type + " Changed: " + data.value + "</li>" ).appendTo( "#example3" );
} );
channel.publish( "DrWho.NinthDoctor.Companion.Changed", { type : "Companion Name", value : "Rose"   } );
channel.publish( "DrWho.TenthDoctor.Companion.Changed", { type : "Companion Name", value : "Martha" } );
channel.publish( "DrWho.Eleventh.Companion.Changed",    { type : "Companion Name", value : "Amy"    } );
channel.publish( "DrWho.Location.Changed",              { type : "Location",      ...