JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="https://cdn.rawgit.com/lhorie/mithril.js/next/mithril.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.ui.min.js"></script>
<script src="https://rawgit.com/geut/mithril-transition/master/dist/mithril-transition.umd.js"></script>
<link rel="stylesheet" href="https://rawgit.com/geut/mithril-transition/master/dist/index.css">

CSS

body {
    overflow: hidden;
}
.page > .container {
    padding-top: 70px;
}

Babel + JSX

/*
 * we create a custom mithril transition using whatever 
 * we want..pure CSS, pure JS, jQuery or like me, Velocity (i'm a big fan of this library:D)
 */
const anim = mithrilTransition({
    anim: function (lastElem, newElem, direction, cbLast, cbNew) {
        const query = '.navbar-brand, .page > .container > *';
        if (direction === 'next') {
            Velocity(
                lastElem.querySelectorAll(query),
                'transition.slideLeftBigOut',
                {
                    complete: cbLast,
                    stagger: 100
                }
            );

            Velocity(
                newElem.querySelectorAll(query),
                'transition.slideRightBigIn',
                {
                    stagger: 100,
                    complete: cbNew
                }
            );
        } else {
            Velocity(
                lastElem.querySelectorAll(query),
                'transition.slideRightBigOut',
                {
                    complete: cbLast,
                    stagger: 100
                }
            );

            Velocity(
                newElem.querySelectorAll(query),
                'transition.slideLeftBigIn',
                {
                    stagger: 100,
                    complete: cbNew
                }
            );
        }
    }
});

function layout(content, props) {
	return m('.app.pt-perspective', [
        m('.page.pt-page', {key: m.route(), config: anim}, [
            m('nav.navbar.navbar-inverse.navbar-fixed-top', [
                m('.container', [
                    m('.navbar-header', [
                        m('a.navbar-brand', props.title)
                    ])
                ])
            ]),
            m('.container', [
                content
            ])
        ])
    ]);
}

function pageFactory(title, nextUrl, backUrl) {
	return {
        controller: function () {
            return {
                title: m.prop(title),
               ...