JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<div id=couleurs>

</div>

JavaScript

let couleurs = [
{id : '1' , colorName : 'rouge1' , colorHex :'#F00' , dossier : 'rouge' },
{id : '2' , colorName : 'rouge2' , colorHex :'#F80' , dossier : 'rouge'},
{id : '3' , colorName : 'rouge3' , colorHex :'#FF0' , dossier : 'rouge'},
{id : '4' , colorName : 'bleu1' , colorHex :'#00F' , dossier : 'bleu'},
{id : '5' , colorName : 'bleu2' , colorHex :'#08F' , dossier : 'bleu'},
{id : '6' , colorName : 'bleu3' , colorHex :'#0FF' , dossier : 'bleu'},
]
let promises = [];

//On crée les divs de chaque couleur, on push les promises en même temps et on stockera le blob directement dans le tableau de chaque couleur
couleurs.forEach(couleur => {
const div = document.createElement('div');
div.setAttribute('id', couleur.id);
div.setAttribute('style', 'background:'+couleur.colorHex);
div.textContent= couleur.colorName;

document.getElementById("couleurs").appendChild(div);

promises.push(domtoimage.toBlob(document.getElementById(couleur.id)).then(function (blob) {couleur.blob = blob;}));
}
)

Promise.all(promises).then(function(){
      let zip = new JSZip();

			//on fait une boucle pour crée les file dans le zip
      couleurs.forEach(couleur => {
      zip.file(couleur.dossier+'/'+couleur.colorName+'.png', couleur.blob, { binary: true });
      })
      
      zip.generateAsync({ type: "blob" })
      .then(function callback(blob) {
        saveAs(blob, "images.zip");
      })
      
    });