JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <section id="soupZone">
        <div class="clone-container soupZoneContainer" drop-zone="soupZone">
            <div id="soupZoneLetterCopyContainer" class="letter-copy-container"></div>
        </div>
    </section>
    <script src="js/main.js"></script>
</body>

</html>

CSS

html {
    line-height: 1.4;
}
.letter-container, .letter-copy-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.tile-wrapper {
    height:auto !important;
    width:auto !important;
    margin: 5px 7px;
}
.tile {
    background-color: white;
    color: darkblue;
    text-align: center;
    font-size: 35px;
    position: relative;
    overflow: hidden;
    border: black solid 1px;
    padding: 5px;
    border-radius: 5px 10px 7px 5px;
}
.tile p {
    margin:0;
    border:lightskyblue solid 1px;
    min-width: 35px;
    min-height: 49px;
    border-radius: 5px 10px 7px 5px;
}
.doubleLetter .tile p {
    min-width: 70px;
}
#soupZone {
    width:45%;
    height:25vh;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 34vh;
    z-index:0;
}
#soupZone .tile-wrapper {
    vertical-align: text-bottom;
}
.soupZoneContainer {
    width:100%;
    text-align:center;
}
#soupZoneLetterCopyContainer {
    position: absolute;
    z-index:2;
    height: 100% !important;
    width:100%;
    background-color: limegreen;
}
#soupZoneLetterContainer {
    position: absolute;
    vertical-align: middle;
    height: 100% !important;
    width:100%;
}

JavaScript

var AMOUNT_OF_LETTERS = 10;
var sContainer = $("#soupZoneLetterCopyContainer");

$(document).ready(function () {
    var arrLength = [1, 3, 2, 1, 2, 3, 1, 2, 3, 3, 2, 2, 1, 2, 3]; // Amount of characters per tile (currently static for development purposes)
    for (var index = 0; index < AMOUNT_OF_LETTERS; index++) {
        sContainer.append(addLetter(arrLength[index]));
    }
    adjustLetters();
});

function addLetter(numberOfCharacters) {
    if (!numberOfCharacters) numberOfCharacters = 1;
    var possible = "abcdefghijklmnopqrstuvwxyz";
    var lettersToUse = "";
    for (var index = 0; index < numberOfCharacters; index++) lettersToUse += possible.charAt(Math.floor(Math.random() * possible.length));

    var stringToReturn = "";
    switch (numberOfCharacters) {
        case 1:
            stringToReturn = "<div class='tile-wrapper'><div class='tile'><p>" + lettersToUse + "</p></div></div>";
            break;
        case 2:
        case 3:
            stringToReturn = "<div class='tile-wrapper doubleLetter'><div class='tile'><p>" + lettersToUse + "</p></div></div>";
            break;
    }
    return stringToReturn;
}

function adjustLetters()
{
    // Some JS adjustments to the letters could come here
}