JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<nav>
  <label>Anzahl Textblöcke:
    <input type="number" id="fragmente" min="0" max="20" value="3">
  </label>
</nav>
<main>
  
</main>

CSS

main {
  background-color: #ccc;
}
main > span {
  font-size: 300%;
  border: 1px solid red;
  margin: 0.1em 0.2em;
  display: inline-block;
}

JavaScript

let fragments = [ "lorem ipsum", "dolor amet", "consectetur adipisici",
                  "elit sed eiusmod", "tempor incidunt ut",
                  "labore et dolore", "magna aliqua"];

let main = document.querySelector("main");
let numFragments = document.getElementById("fragmente");

numFragments.addEventListener("change", createFragments);
createFragments();

function createFragments() {
  main.innerHTML = "";
  for (let i=numFragments.value; i>0; i--) {
    let p = document.createElement("span");
    let rnd = parseInt(Math.random() * fragments.length);
    p.textContent = fragments[rnd];
    main.appendChild(p);
  }
}