JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//rawgit.com/ArthurClemens/Polythene/master/polythene-standalone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div class="container" id="main">
  <div class="row">
      <div id="foo"></div>
  </div>
</div>

CSS

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=111fddc4f746b83141e2)
 * Config saved to config.json and https://gist.github.com/111fddc4f746b83141e2
 */
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html...

CoffeeScript

textfield = require("polythene/textfield/textfield")
field = m textfield, {
  label: "Name"
  floatingLabel: true
}

mPlotly = view: (ctrl, props) ->
  m 'div', 
    config: (el, isInit, ctx) ->
      Plotly.newPlot(el, props.data, {width: "100%"})
      window.onresize = ->
        Plotly.Plots.resize(el)


data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];
 
myPlot = m mPlotly, {data: data} 

card = require('polythene/card/card')
myCard = m card, 
    content: [
      {
        primary:
          title: 'Primary Title'
      }, 
      {
        text:
          content: myPlot
       }
    ]
  
myApp = view: ->
  m 'div', [1..10].map (d) ->
    m '.col-xs-12.col-md-4', {
      style: {marginBottom: "15px"}
    }, myCard




m.mount(document.getElementById("foo"), myApp)