JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="center-logo"></div>
<div class="clapper"></div>
<div class="date"></div>

<div id="begin">swipe to  begin</div>
<div id="movie-title"></div>

<div id="film-list">
<h1>Films Showing</h1>
<ul id="movies">
</ul>
</div>

<div id="date-chooser">
</div>

CSS

@charset "UTF-8";
/* CSS Document */
html {
    background: url(../images/bg-width-320.svg) no-repeat bottom right #121212; height:100%;
	font-family: 'Source Sans Pro', sans-serif;	font-size:1em/12px;
	color:#fcfcfc;
	}
body{margin:0; padding:0;}
h1{
	line-height:43px; 
	height:41px; 
	border-bottom:1px solid #FFF; 
	font-size:16px; 
	margin:0; 
	padding:0;
	letter-spacing:.1em;
	text-align:center;
	font-weight:400;


}
h1 img{width:22px;}
.center-logo {
   width: 150px;
   height: 150px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -75px;
   margin-top: -75px;
   background:url(../images/icon-logo.svg) no-repeat center top; 
}

.clapper {
	text-align:center;
	padding-top:60px;
   width: 150px;
   height: 90px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -75px;
   margin-top: -75px;
   background:url(../images/clapper.svg) no-repeat top center;
   display:none;
}
.date {
	text-align:center;
	padding-top:60px;
   width: 150px;
   height: 90px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -75px;
   margin-top: -75px;
   background:url(../images/date.svg) no-repeat top center;
   display:none;
}

#begin{position: absolute; bottom:1%; padding-top:43px; background:url(../images/swipe-right.svg) center top no-repeat; text-align:center; width:100%; height:100px;}

#film-list{background:#121212;  border:1px solid #FFF;width: 90%; height: 90%; position: absolute; left:5%; right:5%; top:5%; bottom:5%; display:none} 
#movies{padding:0; margin:0; list-style:none;}
#movies li {height:50px; line-height:50px;}
#U{background:url(../images/U.svg) left center no-repeat;}

#date-chooser{background:#121212;  border:1px solid #FFF;width: 90%; height: 50%; position: absolute; left:5%; right:5%; top:25%; bottom:25%; display:none} 

.ui-loading .ui-loader { display: none; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px;...

JavaScript

var movieList = {"movies": [
    {"name": "Only God Forgives", "rating": 18},
    {"name": "Now You See Me", "rating": 12},
    {"name": "Despicable Me 2 3D", "rating": "U"},
	{"name": "Despicable Me 2 3D", "rating": "U"}
]
};


	function begin(){
	$( this ).hide();
		$(".center-logo").hide(),
		$(".clapper").show(),
		$(".clapper").text("tap to chose film")
	}
	function movieChoice(){
		$("#film-list").fadeIn('slow'),
		$(movieList.movies).each(function(index){$("#movies").append('<li class="selector" id="'+this.rating+'">' + this.name  + '</li>');});
	}
	function movieSelector(){
		$("#film-list").fadeOut('slow')
		$(".clapper").hide()
		$(".date").show()
	}
 
	$("#begin").on( "swiperight", begin)
	$(".clapper").on( "tap", movieChoice)
	$("#movies").on( "tap", '.selector', movieSelector)