JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      #pyramid {
        font-family: "Courier New", monospace;
        line-height: 0;
      }
    </style>
  </head>
  <body>
    <h1>Mario 2</h1>
    <h3>Behold this wonderful pyramid:</h3>
    <div id="pyramid">
      <!-- Our pyramid will go inside here -->
      <div id="construction">
        <p>Uh oh! the pyramid is still under construction.</p>
        <p>Check back again soon... our developers are hard at wrk as we speak!</p>
      </div>
    </div>
    <script src="mario.js"></script>
  </body>
</html>

JavaScript

buildPyramid(20);
function buildPyramid(height) {
  const heightInitial = height;
  let bricks = 1;
  for (let i = 0; i < heightInitial; i ++) {
    let spaces = height -= 1;
    const p = document.createElement("pre");
    p.textContent = " ".repeat(spaces) + "#".repeat(bricks) + " ".repeat(spaces);
    bricks += 2;
    document.querySelector("#pyramid").append(p);
  }
}