JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.5.1/build/cssreset/reset-min.css&amp;amp;3.5.1/build/cssfonts/fonts-min.css&amp;amp;3.5.1/build/cssbase/base-min.css">
<div id='pageContainer'><div id='pageApp' class="yui3-app">
        <div class='pageController'>
                  <a href='/page1'><div>Page 1</div></a>
                  <a href='/page2'><div>Page 2</div></a>
                  <a href='/page3'><div>Page 3</div></a>
        </div>
        <div id='pageView' class="yui3-app-views">
        </div>
</div></div>


<div id='page1' class='pageContent'>
        <h1>page 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis sapien, tempor sit amet venenatis congue, pulvinar a ligula. Nullam pulvinar vulputate malesuada. In vitae est quam. In a est non mi congue ultrices. Nam facilisis, est egestas euismod volutpat, ipsum velit ultricies tortor, eu sollicitudin urna felis ac massa. Curabitur sed ligula eu sem vestibulum laoreet eu eu massa. Nam urna diam, lobortis gravida semper eget, lacinia ut nibh. Aenean nec neque at purus porta facilisis. Maecenas aliquet pulvinar arcu, et adipiscing orci fermentum vitae.</p>
</div>                        
<div id='page2' class='pageContent'>
        <h1>page 2</h1>
        <p>Nullam non neque vitae sapien porta interdum. Nam vitae nisl id erat imperdiet faucibus eget nec metus. Vivamus dictum imperdiet ullamcorper. Etiam feugiat libero est, sed rhoncus magna. Nunc id purus leo. Sed sollicitudin, ante et luctus varius, ipsum magna tincidunt dui, non aliquam dolor risus in enim. Sed condimentum laoreet metus, at aliquam ante facilisis sed. Morbi quis nulla et nunc vehicula mollis. Etiam sit amet arcu ut tortor luctus consectetur. Mauris tempus nulla in odio rutrum non lacinia est egestas. Ut id tellus lectus, at vulputate ante. Cras aliquet convallis massa id sodales.</p>
</div>                        
<div id='page3' class='pageContent'>
        <h1>page 3</h1>
       ...

CSS

html {background:grey}
body  {margin:0;color:#555555; min-height:650px;}
a {color:white; text-decoration:none;}
#pageContainer {margin: 100px auto; width: 500px; min-height: 100%; position: relative;}
#pageApp {width:100%; padding:20px 0 0 20px;}
#pageView {margin:0 0px 0 120px;background-color:white; padding:0px; width:380px; height:340px;}
.pageController {width:120px; padding-top:40px; color: #C4CCDA; font-size: 16px;text-align:right; float:left;}
.pageController div {cursor:pointer;border-bottom: 1px solid #242A37; background-color: #31394A;line-height: 20px; padding:10px 20px 10px 10px;}
.pageController .selected {background-color:#262C3A}
.pageInner {padding:20px}
.pageContent {visibility:hidden}

JavaScript

YUI().use('app-base', 'app-transitions', function(Y) {

        // slow down transitions so we see what's happening
        // Y.Transition.fx['app:slideRight'].duration = 3;
        // Y.Transition.fx['app:slideLeft'].duration = 3;

        var StateView, app, currentPage=1;

        // page view                
        Y.page = Y.Base.create('pageView', Y.View, [], {
                render: function () {
                        var pageNo = this.get('pageNo');
                        htm = Y.one('#page' + pageNo).getContent();
                        this.get('container').setContent('<div class="pageInner">' + htm + '</div>');
                        return this;                        
                 }
        });
        
        // app
        app = new Y.App({
                transitions: true,
                container: '#pageApp',
                viewContainer: '#pageView',
                serverRouting: false,
                views: {
                        page1: {type: 'page', preserve:true},
                        page2: {type: 'page', preserve:true},
                        page3: {type: 'page', preserve:true}
                }
        });
    
        
        // route handling to page
        app.route('/:page', function (req) {
                var page = req.params.page,
                    no = page.replace('page',''),
                    htm,
                    transition;
                    
                // slide right if we're stepping back in the page sequence
                // slide left if we're stepping up in the page sequence
                transition = no < currentPage?'slideRight':'slideLeft';
                
                this.showView(page, {pageNo:no}, {
                    prepend   : no < currentPage,
                    transition:transition
                });
                
                currentPage = no;
        });                

        app.render();
    
        // begin by showing page 1
       ...