JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://demo.define.se/iphonebutiken/v0.4/css/build_mobile.css">
<script src="http://demo.define.se/iphonebutiken/v0.4/js/modernizr.js"></script>
<script src="http://demo.define.se/iphonebutiken/v0.4/mobile.js"></script>
<div class=header>
<h1 class=logotype>CD</h1>
<div class=righthead>
<div class=priceinfo>
<span class=setprice>Price</span>
<span class=price>€ 39</span>
</div>
<button class=buy><span class=cart></span></button>
</div>
</div>
<div class=overlay>
<div class=close></div>
<div class=layout>
<h2>Layout</h2>
<ul class=layouts></ul>
<button class=done-layouts><span class=check></span> Done</button>
</div>
<div class=background>
<h2>Background</h2>
<p>Colors</p>
<ul class=colors>
<li data-hex="#000000" style="background:#000000"></li>
<li data-hex="#ff0000" style="background:#ff0000"></li>
<li data-hex="#ffff00" style="background:#ffff00"></li>
</ul>
<p>Patterns</p>
<ul class=patterns></ul>
</div>
<div class=addtext>
<h2>Text</h2>
<textarea placeholder="Text..."></textarea>
<select name=font id=fontselect></select>
<input type=text name=fontsize id=fontsize value=10>
<ul class=text-align>
<li class=selected data-align=text-left><span class=tleft></span></li>
<li data-align=text-center><span class=tcenter></span></li>
<li data-align=text-right><span class=tright></span></li>
</ul>
<ul class=colors></ul>
<button class=done-addtext><span class=check></span> Done</button>
<button class="done-updtext hidden"><span class=check></span> Update</button>
</div>
<div class=misc>
<h2>Misc</h2>
<hr>
<input id=scale name=scale_lbl class=css-checkbox...
JavaScript
$('.colors li').click(function(){
alert('yo');
});