JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div class="wrapper">
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
  
      <div class="numbers-container numbers-container-y">
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">4</div>
        <div class="number">5</div>
      </div>
  
      <div class="numbers-container numbers-container-x">
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">4</div>
        <div class="number">5</div>
      </div>
  
      <p class="likelihood">
        Likelihood
      </p>
      <p class="consequence">
        Consequence
      </p>
      </div>
  </section>

CSS

.row {
  display: flex;
}

.box {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  width: 98px;
  height: 98px;
  font-size: 150%;
  border: 1px solid black;
  overflow: scroll;
}

.box p {
  font-size: 12px;
  color: black;
  margin: 5px;
}

.wrapper {
  margin: 60px 0 90px 90px;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#green {
  background-color: green;
}

section {
  position: relative;
  width: 600px;
}

p.likelihood {
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: top;
  position: absolute;
  top: 50%;
  left: -20px;
  font-size: 30px;
  margin: 0;
}

p.consequence {
  font-size: 30px;
  position: absolute;
  transform: translateX(-50%);
  left: calc(50% + 45px);
  bottom: -60px;
  margin: 0;
}

.numbers-container {
  position: absolute;
  display: flex;
}

.numbers-container-x {
  padding-top: 10px;
  left: 90px;
  bottom: -25px;
}

.numbers-container-x .number {
  width: 100px;
  text-align: center;
}

.numbers-container-y {
  flex-direction: column-reverse;
  left: 70px;
  top: 0;
}

.numbers-container-y .number {
  height: 100px;
  line-height: 100px;
}

JavaScript

const risks = {
  "d": {
    "results": [
      {
        "Title": "Pandemic & Natural Disasters",
        "Status": "Active",
        "Priority": "(1) High",
        "Category": "(2)",
        "Likelihood": "5",
        "Consequence": "3"
      },
      {
        "Title": "New Example",
        "Status": "Active",
        "Priority": "(1) High",
        "Category": "(3)",
        "Likelihood": "4",
        "Consequence": "4"
      },
      {
        "Title": "Example #2",
        "Status": "Active",
        "Priority": "(1) High",
        "Category": "(3) Performance (Scope)",
        "Likelihood": "4",
        "Consequence": "3"
      },
      {
        "Title": "Delays",
        "Status": "Active",
        "Priority": "(1) High",
        "Category": "(2) Schedule",
        "Likelihood": "5",
        "Consequence": "2"
      }
    ]
  }
}




const getBoxNode = (x, y) => {
  const rowId = Math.abs(y - 5)
  const row = document.querySelector(`.row:nth-child(${rowId + 1})`)

  return row.querySelector(`.box:nth-child(${x})`)
}

const appendData = (item) => {
  const {
    Title,
    Category,
    Priority,
    Status,
    Severity
  } = item
  const x = Number(item.Consequence)
  const y = Number(item.Likelihood)

  const box = getBoxNode(x, y);

  // add texts
  [Title, Category, Priority, Status, Severity].forEach((text) => {
    const pNode = document.createElement('p')
    pNode.textContent = text

    box.appendChild(pNode)
  })
}

Promise.resolve(risks)
  .then((data) => {
    data.d.results.forEach((item) => {
      appendData(item)
    });
  });