JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="data">
<button onClick="check()">SUBMIT</button>

<div id="results"></div>

CSS

.wrong {
  background: red;
  color: #fff;
}

JavaScript

const input = document.getElementById("data");
const results = document.getElementById("results");

function check() {
  results.innerHTML = "";
  let message = ``;
  let random = String(getRandom()).split("");
  if (random === input.value) {
    console.log("Win");
  } else {
    if (random.length >= input.value) {
      random.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== input.value[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    } else {
      let inputValue = input.value.split("");
      inputValue.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== random[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    }
  }
}

function getRandom() {
  return Math.floor(Math.random() * 1000);
}