JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>
<div class="ab"><p name="values">x </p></div>

CSS

.ab {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  ;
  color: #FFFFFF;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

JavaScript

var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
  arrayLength = arrayVariable.length;
  
  ptags = document.getElementsByName("values");

for(i=0;i<ptags.length;i++){
  ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
  }