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

drawPyramid(5);
function drawPyramid(height) {
    let spaces = "";
    let bricks = "";
    let line = "";
    let rowLine;
    for (i = 1; i <= height; ++i) {
        for (j = height; j > i; --j) {
            spaces = "&nbsp;" + spaces;
        }
        if (i == 1) {
            bricks = "##"
            line = spaces + bricks;
        } else {
            bricks = bricks + "#"
            line = spaces + bricks;
        };
        rowLine = document.createElement("p");
        document.body.appendChild(p).createTextNode(line);
        spaces = "";
    }
}