JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="app"></div>

CSS

body { margin: 0; }
.layout {
  position: relative;
  padding-bottom: 3.5rem;
  line-height: 1.5;
}
.toolbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 1rem;
  background: #FFEC94;
}
.one { border: 10px solid #FFAEAE; min-height: 500px; }
.two { border: 10px solid #B0E57C; min-height: 1200px; }
.three { border: 10px solid #56BAEC; min-height: 200px; }

.page-enter {
  opacity: 0.01;
}

.page-enter.page-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.page-leave {
  opacity: 1;
}

.page-leave.page-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Babel + JSX

function Layout({ children }) {
  const path = window.location.hash.substr(1) || '/';
  return (
  	<React.addons.CSSTransitionGroup
      component="div"
      className="layout"
      transitionName="page"
      transitionEnterTimeout={1500}
      transitionLeaveTimeout={1300}
    >
    	<div key={path} className="main">{children}</div>
    </React.addons.CSSTransitionGroup>
  )
}

function Toolbar({ children }) {
  return <div className="toolbar">{children}</div>
}

function PageOne() {
  return (
    <Layout>
      <div className="one">
        <h1>Page One</h1>
        <p>Content</p>
      </div>
      <Toolbar>
        <a href="#/three">Prev</a>
        {' -1- '}
        <a href="#/two">Next</a>
      </Toolbar>
    </Layout>
  )
}

function PageTwo() {
  return (
    <Layout>
      <div className="two">
        <h1>Page Two</h1>
        <p>Content</p>
      </div>
      <Toolbar>
        <a href="#/">Prev</a>
        {' -2- '}
        <a href="#/three">Next</a>
      </Toolbar>
    </Layout>
  )
}

function PageThree() {
  return (
    <Layout>
      <div className="three">
        <h1>Page Three</h1>
        <p>Content</p>
      </div>
      <Toolbar>
        <a href="#/two">Prev</a>
        {' -3- '}
        <a href="#/">Next</a>
      </Toolbar>
    </Layout>
  )
}

const container = document.getElementById('app')
const routes = [
  { path: '/', component: PageOne },
  { path: '/two', component: PageTwo },
  { path: '/three', component: PageThree },
]

function render() {
  const path = window.location.hash.substr(1) || '/'
  const { component } = routes.find(x => x.path === path)
  ReactDOM.render(React.createElement(component), container)
}

window.addEventListener('hashchange', render)
render()