JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <p>
        Adresse public du shield : <br />
        http://<input type="text" id="ip" value="123.123.123.123" size="15"/>
        : <input type="text" id="port" value="4200" size="5"/>
    </p>
    <hr />
    <p>
        <input type="checkbox" id="broche3" name="broche3" />
        <label for="broche3">Activer Broche 3.</label>
        Etat : <input type="radio" id="etat3" disabled />
    </p>
    <p>
        <input type="checkbox" id="broche4" name="broche4" />
        <label for="broche4">Activer Broche 4.</label>
        Etat : <input type="radio" id="etat4" disabled />
    </p>
    <p>
        <input type="checkbox" id="broche5" name="broche5" />
        <label for="broche5">Activer Broche 5.</label>
        Etat : <input type="radio" id="etat5" disabled />
    </p>
    <p>
        PWM : 0<input type="range" min="0" max="255" id="pwm" />255
    </p>
    <p>
        A0 : <meter min="0" max="1023" id="a0" />
    </p>
    <button id="envoyer">Executer !</button>
    <p>
        Millis : <span id="millis">0</span> ms
    </p>
</div>

JavaScript

var broches = []; // Tableau de broches
var etats = []; // Tableau d'etat des broches
var pwm;
var a0;
var millis;
var ip; // L'url+port de votre shield (my-ip.com)
var port;

document.addEventListener('DOMContentLoaded', setup, false);

function setup() {
    // fonction qui va lier les variables a leur conteneur html
    ip = document.getElementById("ip");
    port = document.getElementById("port");
    broches[3] = document.getElementById("broche3");
    broches[4] = document.getElementById("broche4");
    broches[5] = document.getElementById("broche5");
    etats[3] = document.getElementById("etat3");
    etats[4] = document.getElementById("etat4");
    etats[5] = document.getElementById("etat5");
    pwm = document.getElementById("pwm");
    a0 = document.getElementById("a0");
    millis = document.getElementById("millis");
    
    // La fonction concernant le bouton
    var bouton = document.getElementById("envoyer");
    bouton.addEventListener('click', executer, false);
}

function executer() {
    // Fonction qui va creer l'url avec les parametres puis
    // envoyer la requete
    var requete = new XMLHttpRequest(); // creer un objet de requete
    var url = "http://" + ip.value + ":" + port.value;
    url += "/?b=";
    for(i=3; i <= 5; i++) { // Pour les broches 3 a 5 de notre tableau
        if(broches[i].checked) // si la case est cochee
            url += i + ",";
    }
    // enleve la derniere virgule s'il existe
    if(url[url.length-1] === ',')
        url = url.substring(0, url.length-1);
    // Puis on ajoute la pwm
    url += "&p=" + pwm.value;
    console.log(url) // Pour debugguer l'url formee    
    requete.open("GET", url, true); // On construit la requete
    requete.send(null); // On envoie !
    requete.onreadystatechange = function() { // on attend le retour
        if (requete.readyState == 4) { // Revenu !
            if (requete.status == 200) {// Retour s'est bien passe !
                // fonction d'affichage (ci-dessous)
   ...