JSFiddle - React, Tailwind, and code Playground

HTML

Rows: <input type="text" id="rows" />
<input type="button" id="generate" value="Generate" />
<input type="button" id="sort" value="Sort" />
<br /><br />
<textarea id="textarea"></textarea>

JavaScript

window.onload = function () {
    var textarea = document.getElementById('textarea');
    document.getElementById('generate').addEventListener('click', function() {
        var rows = Number(document.getElementById('rows').value);
        if (rows < 5 || rows > 500) {
            alert('Enter number between 5 and 500');
        }
        var result = [];
        
        for (var i=0; i<rows; i++) {    
            var row = '';
            for (var j=0; j<4; j++) {
                row += String.fromCharCode(
                    Math.floor(Math.random() * 25 + 97)
                );
            }
            result.push(row);
        }
        textarea.value = result.join("\n")
    })
    document.getElementById('sort').addEventListener('click', function() {
        textarea.value = textarea.value.split("\n").sort().join("\n")
    })
}