JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//canjs.com/release/2.0.3/can.jquery.js"></script>
<div class="app">
    <noscript>JavaScript must be enabled in order to continue.</noscript>
</div>

<script type="text/mustache" id="app">
    <h1>App title</h1>
    <main></main>
    <dialogs-notifications></dialogs-notifications>
</script>

<script type="text/mustache" id="dialogs-notifications">
    <aside class="notifications {{location}}">asdf</aside>
</script>

JavaScript

var app = can.Control.extend(
{
	init: function(element, options)
	{
		element.html( can.view("#app", {}) );
	},
});

var notifications = can.Component.extend(
{
	tag: "dialogs-notifications",
	template: can.view("#dialogs-notifications"),
	scope:
	{
		
	},
	events:
	{
		
	}
});


new app( $(".app") );