JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.27/mithril.js"></script>
<script src="https://cdn.rawgit.com/philtoms/mithril.elements/master/mithril.elements.js"></script>
<!doctype html>
<title>Accordion</title>
<body></body>

CSS

.item {
    margin-top: 1px;
}
.title {
    padding: 3px;
    background-color: #3879D9;
    color: white;
}
.with-highlights .title {
    background-color: yellow;
    color: black
}
.with-highlights .item {
    background-color: green;
    color: white
}
#phil-name {
    margin: 1em 0 0 0;
}
#phil-name.with-highlights {
    color:darkred;
    font-weight:bold;
}
.start {
    float: left;
    width: 10em;
    color: blue;
}

.slug {
    float:left;
    margin: 0 0 0 1em; }
.ev { clear:both; }

CoffeeScript

console.time('START SCRIPT')
URL = "https://stmarks.prismic.io/api/documents/search?ref=VK1yxigAANQPI1lL&access_token=MTQyMDY2MTY1NDIyMy5VbkI0TGtuTTAtWVdUSlgw.TO-_ve-_ve-_vU4v77-9S--_vTd277-9Du-_vUPvv70j77-977-977-977-9JO-_ve-_ve-_ve-_vUrvv73vv70E77-977-9&q=%5B%5B%3Ad+%3D+any(document.type%2C+%5B%22event%22%5D)%5D%5D#format=json"
users = m.prop([])


class Accordion
  constructor: (@content) ->
    @open = m.prop()
    
  controller: -> @
  view: ->
    display = (id) => 'display: ' + if @open() is id then 'block' else 'none'
    m '.accordion', @content.map (line, id) =>
      [title, content] = line
      m '.item', onclick: (=> @open id),
        [
          m(".title", title),
          m('div', style: display(id), content)
        ]
        
model = [
  ['Title 1','item line one'],
  ['Title 2','item line two'],
  ['Title 3','item line three'],
  ['Title 4','item line four']
]

bmURL = "https://stmarks.prismic.io/api"
bms = {}
bms.get = m.request(
     method: "GET"
     url: bmURL
    )
class Bookmarks
  constructor: (@content) ->
    @open = m.prop()
    @e = {}
  controller: => 
    console.time('GETBOOKMARKS')
    @e = bms.get()
    console.timeEnd('GETBOOKMARKS')

    return
  view: =>
    console.time('VIEW BOOKMARKS')
    b = @e.bookmarks
    bbs = []
    Object.keys(b).forEach (key) ->
        bbs.push [
          m '.ev', [
              m( 'div.start', key)
              m( 'div.slug', b[key])
          ]
        ]
        return
    console.timeEnd('VIEW BOOKMARKS')
    return bbs

evs = []
evs.get = m.request(
     method: "GET"
     url: URL
    )
class Events
  constructor: (@content) ->
    @open = m.prop()
    @e = []
  controller: => 
    console.time('GETEVENTS')
    @e = evs.get().results
    console.timeEnd('GETEVENTS')
    return
  view: (ctrl) =>
    console.time('VIEW EVENTS')
    #console.log('map', @e)
    domEvs = []
    domEvs.push m('h2', 'events')
    @e.map (t) ->
     domEvs.push [
      m '.ev', [
          m( 'div.start',...