JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<form name="infos">
    <fieldset>
        <legend>Nouveau chorno</legend>
        <ul>
            <li>
                <label><span>Titre</span> <input name="titre"></label>
            </li>
            
            <li>
                <span>Temps</span>
                <label>
                    <select name="tempsmin">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">sans</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                    minutes
                </label>
                <label>
                    <select name="tempssec">
                        <option value="1">00</option>
                        <option value="2">15</option>
                        <option value="3">30</option>
                        <option value="4">45</option>
                    </select>
                    secondes
                </label>
            </li>
        </ul>
        <input type="submit" value="OK">
    </fieldset>
</form>

<div id="timebox">
    <h4>Musculation des bras</h4>
    <p class="details">10 minutes restantes</p>
    <progress class="progressbar" value="25" max="100">
      <strong>Progress: 60% done.</strong>
    </progress>
</div>

CSS

body {
    padding: 20px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 0.75em;
}

h4 {
    font-size: 1.167em;
    color: #222;
    font-weight: bold;
}

p.details {
    color: #999;
}

.progressbar {
    width: 200px;
}

fieldset {
    float: left;
    border: 3px solid #999;
    padding: 10px;
    width: 380px; /* 400px */
}

legend {
    font-size: 1.167em;
}

fieldset li span {
    display: inline-block;
    width: 60px;
    font-family: sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

JavaScript

$(document).ready(function() {
    
    var formInfos = document.infos,
        titre,
        tempsMin,
        tempsSec;

    function traiter() {
        
        titre = formInfos.titre.value;
        tempsMin = formInfos.tempsmin.selectedIndex.selected;
        tempsSec = formInfos.tempssec.selectedIndex.selected;
        $('#timebox').find('h4').text(titre);
        alert(tempsMin);

        return false;

    }

    document.infos.onsubmit = traiter;

});