JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/smoothness/jquery-ui.css">
<div id="container">
    <header id="header">
        <form id="pieceSelection">
            <aside id="radio">
                <p>
                    Image URL
                    <input type="text" id="image"
                    value="images/stock/walkin.jpg"
                    title="Select a stock image or provide a URL"/>
                </p>
                <p>
                    Grid dimensions
                    <input type="radio" id="radio1" name="radio"/>
                    <label for="radio1">2x2</label>
                    <input type="radio" id="radio2" name="radio" checked/>
                    <label for="radio2">3x3</label>
                    <input type="radio" id="radio3" name="radio"/>
                    <label for="radio3">4x4</label>
                    <input type="radio" id="radio4" name="radio"/>
                    <label for="radio4">5x5</label>
                    <input type="radio" id="radio5" name="radio"/>
                    <label for="radio5">6x6</label>
                    <input type="radio" id="radio6" name="radio"/>
                    <label for="radio6">7x7</label>
                    <input type="radio" id="radio7" name="radio"/>
                    <label for="radio7">8x8</label>
                    <input type="radio" id="radio8" name="radio"/>
                    <label for="radio8">9x9</label>
                </p>
            </aside>
        </form>
    </header>
    <article id="content">
        <nav id="menu">
            <p><strong>Stock Images</strong></p>
            <ol id="selectable">
                <li id="house.jpg" class="ui-state-default">
                    <img src="http://placehold.it/50x40"/>
                </li>
                <li id="gherkin.jpg" class="ui-state-default">
                    <img src="http://placehold.it/50x40"/>
                </li>
                <li...

CSS

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
html body,
html body input {
    font: normal .9em Arial, Verdana, sans-serif;
    color: #444;
}
section, 
header,
footer {
    display: block;
}
header, 
article > *,
footer > * {
    margin: 20px;
}
footer > * {
    margin: 20px;
}
h1 {
    font: bold 2.4em Georgia, serif;
    padding: 10px 0 0;
}
strong {
    font-weight: bold;
}
#container {
    width: 100%;
    min-width: 740px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #cdcdad;
}
#header {
    margin: 0 auto;
    padding: 20px 0;
    background: #adcdcd;
    font-weight: bold;
    font-size: 1.1em;
}
#pieceSelection { 
    text-align: center;
}
#pieceSelection p,
#pieceSelection p input[type="text"] {
    padding: 5px;
    text-align: center;
}
#pieceSelection p input[type="text"] {
    width: 30%;
}
#pieceSelection #radio.ui-buttonset .ui-button-text-only {
    font-weight: bold;
    font-size: .8em;
    padding: 0 1.2%;
}
#content {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
#menu,
#main {
    display: table-cell;
    text-align: center;
    background-color: #cdadcd;
}
#menu {
    width: 260px;
    vertical-align: top;
    background-color: #cdfdcd;
    padding: 10px 0 0 0;
    font-weight: bold;
    font-size: 1.1em;
}
#main {
    vertical-align: middle;
    border-right: 260px solid #faa;
}
#selectable {
    width: 240px;
    min-height: 500px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}
#selectable:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#selectable li {
    float: left;
    margin: 5px;
    padding: 1px;
    width: 105px;
    height: 82px;
}
#selectable li img {
    width: 100%;
    height: 100%;
}
#selectable .ui-selected {
    background: #F39814;
    color: white;
}
#footer {
    margin-top: -3.3em;
    background-color: #fff;
    opacity: .7;
}
#footer ul {
    margin:...

JavaScript

$(function() {
    $("#radio").buttonset();
});

$("#radio :radio").click(function(e) {
    console.log(
        "Scrambling image into " + 
        $(":checked + label", this).text() + 
        " pieces"
    );
});