JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<link rel="stylesheet" href="https://es.greenpeace.org/es/wp-content/themes/gp/assets/css/fonts.css">
<link rel="stylesheet" href="https://es.greenpeace.org/es/wp-content/themes/gp/assets/css/bootstrap.min.css?ver=4.6.0">
<link rel="stylesheet" href="https://es.greenpeace.org/es/wp-content/themes/gp/assets/css/greenpeace.min.css?cache=0.1.17">
<script src="https://es.greenpeace.org/es/wp-includes/js/jquery/jquery.min.js?ver=3.6.0"></script>
<script src="https://es.greenpeace.org/es/wp-content/themes/gp/assets/js/bootstrap.bundle.min.js?ver=4.6.0"></script>
<div id="barra1">
    <!-- EDITAR EL TEXTO EN LA LINEA ABAJO PERO NO TOCAR LAS TAGS HTML-->
    <div>Concedido <strong><span class="current"></span></strong> millones de €. Las inversiones previstas son <strong><span class="maxim"></span></strong> millones de €.</div>
    <div class="progress mb-4" style="height: 30px;">
        <!-- PONER LOS VALORES ABAJO: MIN, MAX, NOW 
            Y EL COLOR DE FONDO EN RGB (valores rgb entre 0 y 255) -->
        <div 
            aria-valuemin="0" 
            aria-valuemax="69500"
            aria-valuenow="5000"
            style="background-color: rgb(122, 189, 148);"
            class="progress-bar the_bar" 
            role="progressbar"
            ></div>
    </div>
</div>
<script>
    // No hace falta cambiar el código abajo
    document.addEventListener("DOMContentLoaded", function() {
        const populateProgressBar = function(selector) {
        const valueMin = jQuery( selector + " .the_bar").attr("aria-valuemin");
        let valueMax = jQuery( selector + " .the_bar").attr("aria-valuemax");
        let valueNow = jQuery( selector + " .the_bar").attr("aria-valuenow");
        jQuery(selector + " .the_bar").css("width", valueNow/valueMax*100 + "%");
        if (valueNow >= 1000) { alueNow = valueNow.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");}
        if (valueMax >= 1000) { valueMax = valueMax.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }
       ...