JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <body>
        <h1>Multiplication Table</h1>
        <div class=grid></div>
    </body>
</html>

CSS

html, body {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

h1{
    text-align: center;
}
.grid{
    width: 660px;
    height: 660px;
    border: 5px solid black;  
    display: flex;
    flex-wrap: wrap; 
    flex-direction: column;
    align-content: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}

.grid-small{
    width: 50px;
    height: 50px;
    border: black 1px solid;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;  
}

JavaScript

const grid=document.querySelector(".grid")
const smallgrid=document.querySelector(".grid-small")
let num = []
let times= []

function arr(){
    for (let i=0; i<169; i++){
       let small=document.createElement("div")
       grid.appendChild(small)
       num.push(small)
       
        num[i].classList.add("grid-small")
      
      
      
    }
       
     
    
}

arr()


function time(){
    for(let i=1; i<13; i++){
        for(let j=1; j<13; j++){
            let result = i*j
            times.push(result)
            
        }
    }
}
time()
console.log(times)