JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div id="applicationWrap">
    <div class="genderToggleWrap">
        <div class="toggle-iphone">
            <div class="toggle toggle-select" data-type="select"></div>
        </div>
    </div>
</div>
<script type="text/x-handlebars">
    <div class="navBar">
        <h1>BAC</h1>
    </div>
    {{outlet}}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>

CSS

</style>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.css"/>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/simontabor/jquery-toggles/master/themes/toggles-iphone.css"/>
<style type="text/css">
/* GENERAL */
.genderToggleWrap {
    margin: 10px;
}
/* GENERAL */

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: "Roboto", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* APP */

.app {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* PAGES */

.page {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 44px;
  padding: 10px;
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(1000%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

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

.page.left {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
 
.page.right {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
 
.page.transition {
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}

/* NAVBAR */

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  color: #666;
  background-color: #ddd;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  z-index: 1;
}

.navbar .title {
  position: absolute;
  left: 44px;
  right: 44px;
  text-align: center;
  font-size: 150%;
  margin: 8px;
  font-weight: bold;
}

/* BUTTONS...

JavaScript

/*
$(function(){
    $('.genderToggleWrap .toggle').toggles({text:{on:'M',off:'F'}});
});
*/
App = Em.Application.create({
    rootElement: '#applicationWrap'
});

App.Router.map(function(){
    this.resource('index');
    this.resource('gender');
    this.resource('weight');
    this.resource('session');
    this.resource('drinks');
});