JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<div id="app"></div>

CSS

.navbar-inverse {
  background-color: steelblue;
  border-color: steelblue;
}
.navbar-inverse .navbar-brand{
  color: white;
}
.navbar-inverse .navbar-nav>li>a {
  color: white;
}

Babel + JSX

/** @jsx m */
const NavbarLinks = {
  view(ctrl, props){return(
    <ul className="nav navbar-nav">
      {props.links.map(link => 
        <li>
          <a href={link.href}>{link.title}</a>
        </li>  
      )} 
    </ul>
  )}
}

const Navbar = {
  view(ctrl, props){
    return <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div className="container">
        <div className="navbar-header">
          <button type="button" className="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-collapse">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <a className="navbar-brand" href="#">{props.title}</a>
        </div>
        <div className="collapse navbar-collapse">
          <NavbarLinks links={props.links} />
        </div>
      </div>
    </nav>
  }
}

const links = [
  {title: 'Home', href: "#home"},
  {title: 'About', href: "#about"}
]
m.mount(
  document.getElementById("app"),
  <Navbar title="Hello" links={links}/>
)