JSFiddle - React, Tailwind, and code Playground

by MartĂ­n Acosta

HTML

<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>
<link rel="stylesheet" href="https://rawgit.com/geut/mithril-transition/master/dist/index.css">
<script src="https://cdn.rawgit.com/lhorie/mithril.js/v0_2_x/mithril.js"></script>
<script src="https://rawgit.com/geut/mithril-transition/v0.2/dist/mithril-transition.umd.js"></script>

CSS

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.page > .container {
    padding-top: 70px;
}

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;
}

.pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

/* animation sets */

/* move from / to  */

.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}


/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

Babel + JSX

/*
 * we create a custom mithril transition using css animations
 * based on the excellent article: https://github.com/codrops/PageTransitions
 */
const anim = mithrilTransition({
    anim: function (lastElem, newElem, direction, cbLast, cbNew) {
        var events = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(lastElem).one(events, cbLast);
        $(newElem).one(events, function () {
            newElem.classList.remove('pt-page-moveFromRight', 'pt-page-moveFromLeft');
        	cbNew();
        });
        if (direction === 'next') {
            lastElem.classList.add('pt-page-moveToLeft');
        	newElem.classList.add('pt-page-moveFromRight');
        } else {
            lastElem.classList.add('pt-page-moveToRight');
        	newElem.classList.add('pt-page-moveFromLeft');
        }
        
    }
});

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),
                nextUrl: m.prop(nextUrl),
                backUrl: m.prop(backUrl)
            };
        },
        view: function (ctrl) {
            return layout([
                m('h1', `Testing the ${ctrl.title()}`),
                m('.panel.panel-primary', [
                    m('.panel-heading', [
                        m('h3.panel-title', `Panel ${ctrl.title()}`)
                    ]),
                    m('.panel-body', [
                        ctrl.backUrl() ? 
                       ...