JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="https://raw.github.com/Reactive-Extensions/RxJS/master/rx.js"></script>
<script src="https://raw.github.com/Reactive-Extensions/rxjs-jquery/master/rx.jquery.js"></script>
<script src="https://raw.github.com/Reactive-Extensions/RxJS/master/rx.time.js"></script>
<div id="container">
	<div id="header">
	DIV art. <a href="http://hazelcough.zxq.net/index.html">by Michelle Bu</a> | <a class="disappear">disappear!</a> <a class="reappear">reappear!</a>
	</div></div>
	<div id="row1">
		<div class="btri"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="tri"></div>
	</div>
	<div id="row2">
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="tri"></div>
	</div>
	<div id="row3">
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="btri"></div>
		<div class="emp"></div>
		<div class="emp"></div>
	</div>
	<div id="row4">
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
	</div>
	<div id="row5">
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="emp"></div>
	</div>
	<div id="row6">
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="tri"></div>
	</div>
	<div id="row7">
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
		<div class="emp"></div>
		<div class="emp"></div>
		<div class="tri"></div>
	</div>
	<div id="row8">
		<div class="emp"></div>
		<div...

CSS

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

a {outline: none;} /* firefox borders */
a img {border: none;} /* ie img borders */

/* rns camelia */
@font-face
{
    font-family: 'rnscamelia';
    src: url('/assets/camelia.ttf') format('truetype');
}

html, body {
	background-color: #e2e2e2;
	text-shadow: 0px 1px 1px #ffffff;
}

/* triangles */
.tri {
	border-color: transparent transparent transparent #d3d3d3;
	border-style: solid;
	border-width: 30px;
	height: 0px;
	width: 0px;
	position: relative;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	margin-top: -18px;
}

.btri {
	border-color: transparent transparent transparent #49a2aa;
	border-style: solid;
	border-width: 30px;
	height: 0px;
	width: 0px;
	position: relative;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	margin-top: -18px;
}

.emp {
	border-color: transparent transparent transparent transparent;
	border-style: solid;
	border-width: 30px;
	height: 0px;
	width: 0px;
	position: relative;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	margin-top: -18px;
}

#container {
	padding-left: 100px;
	padding-top: 100px;
	width: 600px;
}

#header {
	clear: both;
	font-family: 'rnscamelia', trebuchet ms;
	font-size: 30px;
	color:...

JavaScript

$(function () {
   
    function id (x) { return x; }
    
    $('.disappear').onAsObservable('click')
    .selectMany(function () {
        return Rx.Observable.generateWithRelativeTime(
            20,
            function (x) { return x >= 1; },
            function (x) { return x - 1; },
            id,
            function (x) { return 100; }
        );    
    })
    .subscribe(function (row) {
        $('#row' + row).animate({opacity: 0});
    });
    
    $('.reappear').onAsObservable('click')
    .selectMany(function () {
        return Rx.Observable.generateWithRelativeTime(
            1,
            function (x) { return x <= 20; },
            function (x) { return x + 1; },
            id,
            function (x) { return 100; }
        );
    })
    .subscribe(function (row) {
        $('#row' + row).animate({opacity: 1});
    });   
});