JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grille">
</div>

CSS

#grille {}
#grille input {border:none;text-align:center; width:20px;height:20px; padding:1px;}
#grille table {border-collapse:collapse; border:3px solid #000;}
#grille table td {border:1px solid #000;}
#grille table td.borderRightCol {border-right:3px solid #000;}
#grille table td.borderBottomCol {border-bottom:3px solid #000;}
#grille table td.grey input{background:#ccc;}

JavaScript

function createTable() {
    var tc = document.getElementById('grille');
    
    //creation tableau HTML
    tc.innerHTML = ['<table cellspacing="0"><tbody>',
                    new Array(10).join(getLine()),
                    '</tbody></table>'
                   ].join('');
    // recuperation du tableau dans la grille
    var t = tc.getElementsByTagName('table')[0];
    
    //récupération tableau sudoku
    var s = sudoku();
    //ajout classes CSS sur certaines cellules + ajout du nombre dans la cellule
    for (var i=0; i<9; i++) {
        for (var j=0; j<9; j++) {
            var c = t.rows[i].cells[j];
            //bordure droite accentuee
            if (j%3==2)
                c.className="borderRightCol";
            //bordure bas accentuee
            if (i%3==2)
                c.className+=" borderBottomCol";
            // colorier la cellule en gris une fois sur 2
            if ((i+j)%2==1)
                c.className+=" grey";
            //integration chiffre du tableau de chiffres généré 
            c.getElementsByTagName('input')[0].value = s[j][i];
            
        }
    }
    
    
    
}

function getLine() {
    return ['<tr>',
            new Array(10).join('<td><input type="text" size="1" maxlength="1"></td>'),
            '</tr>'].join('');
}


createTable();



//code pas à moi, trouvé sur Devleoppez.net pour montrer comment l'integrer dans mon code : 
function ordre (a,b){return a-b}
    
    function sudoku(){
    
    var l=new Array();
                     var c=new Array();
                     var zon=new Array();
                     
                     for(i=0;i<9;i++){
                         l[i]=new Array();
                         c[i]=new Array();
                         zon[i]=new Array();
                     }
                     
                     var tour=0;
                     
                     for(i=0;i<9;i++){
                         
                         for(j=0;j<9;j++){
            ...