JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css" />

<script type="text/x-handlebars" data-template-name="application">
    <nav class="mainNav">
        <ul>
            <li>{{#link-to 'home'}}Home{{/link-to}}</li>
            <li>{{#link-to 'grids'}}Grids{{/link-to}}</li>
        </ul>
    </nav>
    <div class="pageWrap">
        {{outlet}}
    </div>
    
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h1>Home Page</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="grids">
    <h1>Grids</h1>
    {{outlet}}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="https://rawgithub.com/ebryn/ember-model/master/ember-model.js"></script>
<script src="https://rawgithub.com/gigafied/ember-animate/master/ember-animate.js"></script>
<script src="https://rawgithub.com/EightMedia/hammer.js/master/hammer.js"></script>

CSS

.mainNav { width: 100%; height: 30px; background-color: #8da865; }
.mainNav > ul > li { 
    min-width: 15%; 
    padding:2px 5px 2px 5px; 
    float:left; 
    line-height: 26px; 
    border-left:solid 1px #95b567;
    border-right: solid 1px #6d8944; 
    text-align:center; 
}
.mainNav > ul > li > a { color: white; font-weight: bold; }

.pageWrap {
    position: absolute;
    left: 0%;
    top: 0px;
    padding-top: 30px;
    padding-bottom: -30px;
    width: 100%;
    height: 100%;
    border: solid 1px #336633;
}
/*
Page transitions
*/
.page {
    /*margin-top: 90px;*/
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position:absolute;
    height: 100%;
    width:100%;
    top: 0px;
    left: 0;
    background-color: rgba(200, 200, 200, .5);

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.page.current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.page.previous {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
 
.page.next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
 
.page.transition {
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

JavaScript

App = Em.Application.create();
App.Router.map(function(){
    this.resource('home', {path:'/'}, function(){
        this.resource('grids', {path:'/grids'})
    });
});