JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<div data-role="page">
<div data-role="header" data-theme="a">
    <h3>Tile List Sample</h3>
</div>
<div data-role="content">
    <ul data-role="listview" class="tilelist" >
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample1</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample2</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample3</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample4</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample5</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample6</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample7</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample8</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample9</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img src="http://kuzya.com/_img/logo/logo.png" alt=""><p>sample10</p></a></li>
    <li id="listitem" data-icon="false"><a href="#detail" data-rel="dialog"><img...

CSS

ul.tilelist {
    width: 100%
    margin: 10px;
    padding: 10px;
    display:inline-block;
}

ul.tilelist li {
    list-style-type: none;
    border-style: solid;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    margin: 3px;
    width: 169px;
    height: 96px;
    display: inline-block;
    vertical-align: top;
}

ul.tilelist > a {
    display: block;
    position: relative
    text-decoration: none;
    color: #FFFFFF;
    width: 98px;
    height: 75px;
}

ul.tilelist img {
    max-width:50px;
    max-height:50px;    
    margin:5px;
}

ul.tilelist p {
    margin: 0px;
    margin-left: -40px;
    margin-top: -10px;
}

JavaScript

(function($){
    $("#listitem").live("click", function(event){
    var target = $(event.originalEvent.target.parentElement).find("p").text();
    $("#detail").find("p#name").html("Name: " + target);
    });
})(jQuery);