JSFiddle - React, Tailwind, and code Playground

HTML

<div class="testContainer">
		<div class="test-item1">Question goes here</div>
	</div>

CSS

.testContainer {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto auto;
  width: 70%;
  height: 200px;
  border-radius: 15px;
  background-color: hsl(210, 7%, 40%);
  padding: 15px;
  grid-gap: 5px;
}

.test-item1 {
  padding: 20px;
  text-align: center;
  margin: 0px;
  border: 1px solid white;
  grid-column-start: span 5;
  grid-row-start: span 2;
}

.test-item {
  padding: 5px;
  text-align: center;
  margin: 0px;
  border: 1px solid white;
  background: hsl(210, 7%, 35%)
}

.test-item:hover {
  background: hsl(210, 7%, 40%);
  cursor: pointer;
}

JavaScript

for (i = 1; i < 6; i++) { //This creates the 5 boxes underneath, and gives them attributes and onClick
		var div = document.createElement("div");
		div.setAttribute("id", "i"+i);
		div.setAttribute("class", "test-item");
		div.innerHTML = i;
		div.addEventListener("click", function() {
			regn(i);
		}, false);
		document.querySelector(".testContainer").appendChild(div);
	}

	function regn(num) {
		switch (num) {
			case 1:
			console.log("en");
				break;
			case 2:
			console.log("to");
				break;
			case 3:
			console.log("tre");
				break;
			case 4:
			console.log("fire");
				break;
			case 5:
			console.log("fem");
				break;
			case 6:
			console.log("seks");
				break;
			default:
			console.log("Error");
			break;
		}
	}