JSFiddle - React, Tailwind, and code Playground

by Will McKinley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

    <button type="btn btn-info" class="js-grid">Click me</button> 
    <button type="btn btn-info" class="js-grid">Or me</button> 
    <button type="btn btn-info" class="js-grid2">Grid 2</button> 
    <div class="grid"></div><div class="grid2"></div>
    <div class="grid"></div>

CSS

.row { width: 100%; clear: both; text-align: center; }
    .col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; }
    .col:hover { background-color: #333333; color: #ffffff; }
    .grid, .grid2 { margin-bottom: 10px; }

JavaScript

function grid(rows,cols,target){ 
      cols = cols || rows;
      target = target || "grid";
      var gridDiv = $("." + target);
      gridDiv.html(''); // clear grid to reload
      _.times(rows, function() {
        gridDiv
			.each(function(){ // allows multiple grids
    			$(this).append(addRows(rows,cols));
        	});
     });
	};
    function addRows(rows,cols){
        return $("<div />")
            		.addClass("row")
            		.html(
                        addCols(cols)
      				);
    };
    function addCols(cols){
        return _.times(cols, function() {
            return $("<div />")
                .addClass("col")
                .html( getElement() );
         });
    };
    function getElement(){
        var elements = [ 
            "A",
            "B",
            "C"
        ];
        return _.sample(elements);
    };
	$(".js-grid").click( function(){ grid(6,10) } );
	$(".js-grid2").click( function(){ grid(3,5,'grid2') } );