JSFiddle - React, Tailwind, and code Playground

by srosengren

HTML

<div id="game"></div>

CSS

.tile {
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc;
    text-align: center;
    width: 23px;
    line-height: 23px;
}

[data-row="2"] {top: 30px;}
[data-row="3"] {top: 60px;}
[data-row="4"] {top: 90px;}
[data-col="2"] {left: 30px;}
[data-col="3"] {left: 60px;}
[data-col="4"] {left: 90px;}

JavaScript

(function(fields){
    var game = document.getElementById('game');
    
    for(var i = 16; i > 0; i--){
        var field = document.createElement('div');
        field.innerHTML = fields.splice(Math.floor((Math.random() * i) + 1),1);
        field.className = 'tile';
        field.setAttribute('data-row',Math.ceil(i / 4));
        field.setAttribute('data-col',(i / 4 - Math.floor(i / 4)) * 4 + 1);
        
        game.appendChild(field);
    }    
})([undefined,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);