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="#F00" style="background:#F00;">rouge 1</div>
<div id="#F80" style="background:#F80;">rouge 2</div>
<div id="#FF0" style="background:#FF0;">rouge 3</div>
<div id="#00F" style="background:#00F;">bleu 1</div>
<div id="#08F" style="background:#08F;">bleu 2</div>
<div id="#0FF" style="background:#0FF;">bleu 3</div>

JavaScript

let promises = [];
let images = [];

promises.push(domtoimage.toBlob(document.getElementById('#F00')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#F80')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#FF0')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#00F')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#08F')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#0FF')).then(function (blob) {images.push(blob);}));

Promise.all(promises).then(function(){
      let zip = new JSZip();
      zip.file('Rouge/F00.png', images[0], { binary: true });
      zip.file('Rouge/F80.png', images[1], { binary: true });
      zip.file('Rouge/FF0.png', images[2], { binary: true });
      zip.file('Bleu/00F.png', images[3], { binary: true });
      zip.file('Bleu/08F.png', images[4], { binary: true });
      zip.file('Bleu/0FF.png', images[5], { binary: true });
      zip.generateAsync({ type: "blob" })
      .then(function callback(blob) {
        saveAs(blob, "images.zip");
      })
    });