JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
        <div class="cell col-xs-12 col-lg-12"><div class='inner'>FULL</div></div>
        <div class="cell col-xs-12 col-lg-12"><div class='inner'>FULL</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-12 col-lg-12"><div class='inner'>FULL</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
        <div class="cell col-xs-12 col-lg-12"><div class='inner'>FULL</div></div>
        <div class="cell col-xs-6 col-lg-6"><div class='inner'>HALF</div></div>
    </div>
</div>

CSS

body {
    padding: 5px;
}

.cell {
    padding: 10px
}

.inner {
    text-align: center;
    height: 100px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0px 0px 5px silver;
    color: black;
    font-weight: bold;
    font-size: 32px;
}

JavaScript

var colors = ['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#e6550d', '#fd8d3c', '#fdae6b', '#fdd0a2', '#31a354', '#74c476', '#a1d99b', '#c7e9c0', '#756bb1', '#9e9ac8', '#bcbddc', '#dadaeb', '#636363', '#969696', '#bdbdbd', '#d9d9d9'];
[].slice.call(document.querySelectorAll('.inner')).forEach(function (e) {
    var index = Math.floor(Math.random() * colors.length);
    e.style.backgroundColor = colors[index + 1];
});