JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/HubSpot/mixen/master/mixen.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<a href="http://github.hubspot.com/mixen" target="_blank">To The Mixen Docs!</a>

SCSS

body {
     font-family: "proxima-nova", "Helvetica Neue", Helvetica, arial, sans-serif;
}

div {
    margin-bottom: 20px;
    width: 200px;
    cursor: pointer;
    border: 2px solid #DDD;
    box-shadow: 0 3px #DDD;
    padding: 8px;
    text-align: center;
}

CoffeeScript

class RenderOnClick
    initialize: ->        
        @events ?= {}
        @events.click = _.bind(@render, @)

        super
        
class CountRenders
    initialize: ->
        @renderCount = 0
        
        super
        
    render: ->
        @renderCount++
        
        super
        
class ButtonView extends Mixen(CountRenders, RenderOnClick, Backbone.View)
    render: ->
        super
        
        @$el.html "Click Me! Rendered #{ @renderCount }"
        
view = new ButtonView
$('body').prepend(view.el)
view.render()

# ButtonView works as if CountRenders extended RenderOnClick which extended
# Backbone.View, but you can mix and match them however you like.
#
# For example, let's say we don't need CountRender:
class OtherButtonView extends Mixen(RenderOnClick, Backbone.View)
# Works too!