JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<link rel="stylesheet" href="//designmodo.github.io/Flat-UI/dist/css/flat-ui.css">
<div class="container" id="main">
  
</div>

CSS

#main{
  margin-top: 20px;
}

CoffeeScript

Page = view: (ctrl, props) ->
  num = +m.route.param("num")
  m '.panel.panel-default',
    m '.panel-body', "Panel #{num}"
    m '.panel-footer.clearfix', 
      m 'a.pull-left', 
        {href: "/page/#{num - 1}", config: m.route},
        'Previous'
      m 'a.pull-right', 
        {href: "/page/#{num + 1}", config: m.route},
        'Next'
    
m.route document.getElementById("main"), "/page/1",
  "/page/:num": m Page