JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<div id="cover-builder-page" data-theme="a" data-role="page">
    <div id="header" data-role="header">
        	<h2>Test</h2>

        <div class="clearfix"></div>
    </div>
    <div id="cover-builder-content" data-role="content">
        <div align="center" data-role="controlgroup" data-type="horizontal">	<a class="coverButton ui-btn-active" data-booktype="Hard" data-role="button">Hardcover | <sup>$</sup>39.<sup>95</sup></a>
	<a class="coverButton" data-booktype="Soft" data-role="button">Softcover | <sup>$</sup>29.<sup>95</sup></a>

        </div>
        <div id="cover-list">
            <div class="list-holder">
                	<h4>Sample Category<span> - Hard Cover</span></h4>

                <div class="list">
                    <label for="Cover26"> <span class="check"></span>

                        <img src="http://placehold.it/110x170" class="background" />
                    </label>
                    <label for="Cover26"> <span class="check"></span>

                        <img src="http://placehold.it/110x170" class="background" />
                    </label>
                    <label for="Cover26"> <span class="check"></span>

                        <img src="http://placehold.it/110x170" class="background" />
                    </label>
                    <label for="Cover26"> <span class="check"></span>

                        <img src="http://placehold.it/110x170" class="background" />
                    </label>
                    <label for="Cover26"> <span class="check"></span>

                        <img src="http://placehold.it/110x170" class="background" />
                    </label>
                </div>
  ...

CSS

#cover-builder-page, #page-builder-page {
    width:100%;
    min-height:100%;
}

#cover-list, #page-list {
    margin:0 -16px;
}
#cover-list .list-holder h4, #page-list .list-holder h4 {
    padding:0 1em;
    margin:0;
}
#cover-list .list-holder, #page-list .list-holder {
    width:100%;
}
#cover-list .list-holder .list, #page-list .list-holder .list {
    width:auto;
    height:190px;
    overflow-y:scroll;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}
#cover-list .list-holder .list label, #page-list .list-holder .list a {
    width:110px;
    height:170px;
    margin:0 8px 5px;
    padding:0;
    position:relative;
    overflow:hidden;
    vertical-align:top;
    display:inline-block;
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.78);
    -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.78);
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.78);
    *display:inline;
    *zoom:1;
}
#cover-list .list-holder .list label .background, #page-list .list-holder .list a .background {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
#cover-list .list-holder .list label div, #page-list .list-holder .list a div {
    position:absolute;
    display:inline-block;
    font-family:'Dom Casual';
    font-weight:700;
    word-wrap:break-word;
    min-height:12px;
    text-rendering:geometricPrecision;
    -webkit-text-size-adjust:100%;
    letter-spacing:normal;
    word-spacing:normal;
}