JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<ul id="squares">
    <li data-num="1" class="nomt noml">1</li>
    <li data-num="2" class="nomt">2</li>
    <li data-num="3" class="nomt">3</li>
    <li data-num="4" class="nomt">4</li>
    <li data-num="5" class="nomt">5</li>
    <li data-num="6" class="noml">6</li>
    <li data-num="7">7</li>
    <li data-num="8">8</li>
    <li data-num="9">9</li>
    <li data-num="10">10</li>
    <li data-num="11" class="noml">11</li>
    <li data-num="12">12</li>
    <li data-num="13">13</li>
    <li data-num="14">14</li>
    <li data-num="15">15</li>
</ul>

<div class="clear"></div>

<p class="trigger">Give me a random number</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200);

body {
    padding: 20px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 100%;
    color: #999;
}

#squares {
    width: 500px;
    font-size: 3em;
}

#squares li {
    float: left;
    margin: 20px 0 0 20px;
    height: 80px;
    width: 80px;
    background-color: #eee;
    text-align: center;
    color: #000;
    line-height: 80px;
}

.selected {
    background-color: #00c1f7 !important;
    color: #fff !important;
}

.clear { clear: both; }

p.trigger {
    display: inline-block;
    margin-top: 25px;
    cursor: pointer;
}

    p.trigger:hover {
        border-bottom: 1px solid;
    }

.nomt /*No Margin-Top*/ { margin-top: 0 !important; }
.noml /*No Margin-Left*/ { margin-left: 0 !important; }

JavaScript

var singleNum,
    randomNum = [],
    i,
    varey;

function randomGenerator(max) {
    var singleNum = Math.round( Math.random()*max );
    return singleNum;
}

for(i=0; i<15; i++) {
    singleNum = randomGenerator(15);
    while(singleNum === 0) {
        singleNum = randomGenerator(15);
    }
    randomNum[randomNum.length] = singleNum;
}