JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container2" >
        <div>
            <div id="thermo2" class="thermometer horizontal" >
                <div class="track" >
                    <div class="goal" >
                        <div class="amount" >
                            <span class="amountText" ></span>
                        </div>
                    </div>
                    <div class="progress" >
                        <div class="amount" >
                            <span class="currentText" ></span></div>
                    </div>

                    <div class="progress effect" >
                        
                    </div>
                </div>
            </div>
            <br/>
            <span class="goalMessage" >
                Thank you, we are almost there</span>
        </div>
</div>
<br/>
<br/>
<div id="container1" >
    <div id="thermo1" class="thermometer" >

        <div class="track" >
            <div class="goal" >
                <div class="amount" >
                    <span class="amountText" ></span>
                </div>
            </div>
            <div class="progress" >
                <div class="amount" >
                    <span class="currentText" ></span>
                </div>
            </div>

            <div class="progresseffect" >

            </div>
        </div>
    </div>
    <br/>
    <span class="goalMessage" > Thank you, we are almost there</span>
    <br/><br/>
     <span>Modified by Edgar Rojas <a href="http://rednao.com" target="blank">Here</a></span>
    
    <br/><br/>
    <span>Originally Started <a href="http://jsfiddle.net/GeekyJohn/UpnKF/" target="blank">Here</a></span>

CSS

#container2
{
	text-align: center;
}
#thermo2
{
	background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
	background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
	background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
	background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
	background: rgb(247,247,247);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
	background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
	border: 0px solid #800000;
	border-radius: 33px 17px 46px 17px;
	display: inline-block;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f6f6f6',GradientType=0 );
	height: 70px;
	moz-border-radius: 33px 17px 46px 17px;
	position: relative;
	webkit-border-radius: 33px 17px 46px 17px;
	width: 350px;
}
#thermo2 > DIV:nth-child(1)
{
	background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
	background-position: 0 -1px;
	background-size: 5% 100%;
	border: 1px solid #aaa;
	height: 20px;
	left: 0;
	margin: 14px auto;
	position: relative;
	top: 10px;
	width: 90%;
}
#thermo2 > DIV:nth-child(1) > DIV:nth-child(1)
{
	height: 100%;
	left: 100%;
	text-align: right;
	top: 0;
}
#thermo2 > DIV:nth-child(1) > DIV:nth-child(1) > DIV:nth-child(1)
{
	border-right: 1px solid black;
	border-top: 0;
	bottom: 0;
	color: #333;
	display: inline-block;
	font-family: Trebuchet MS;
	font-weight: bold;
	height: 33px;
	padding: 0;
}
#thermo2 > DIV:nth-child(1) >...

JavaScript

//originally from http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
        function formatCurrency(n, c, d, t) {
            "use strict";

            var s, i, j;

            c = isNaN(c = Math.abs(c)) ? 2 : c;
            d = d === undefined ? "." : d;
            t = t === undefined ? "," : t;

            s = n < 0 ? "-" : "";
            i = parseInt(n = Math.abs(+n || 0).toFixed(c), 10) + "";
            j = (j = i.length) > 3 ? j % 3 : 0;

            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        }


        /**
        * Thermometer Progress meter.
        * This function will update the progress element in the "thermometer"
        * to the updated percentage.
        * If no parameters are passed in it will read them from the DOM
        *
        * @param {Number} goalAmount The Goal amount, this represents the 100% mark
        * @param {Number} progressAmount The progress amount is the current amount
        * @param {Boolean} animate Whether to animate the height or not
        *
        */
        function thermometer(id, goalAmount, progressAmount, animate) {
            "use strict";

            var $thermo = jQuery("#" + id),
                $progress = jQuery(".progress", $thermo),
                $goal = jQuery(".goal", $thermo),
                percentageAmount,
                isHorizontal = $thermo.hasClass("horizontal"),
                newCSS = {};

            goalAmount = goalAmount || parseFloat($goal.text()),
                progressAmount = progressAmount || parseFloat($progress.text()),
                percentageAmount = Math.min(Math.round(progressAmount / goalAmount * 1000) / 10, 100); //make sure we have 1 decimal point

            //let's format the numbers and put them back in the DOM
            $goal.find(".amountText").text("$" + formatCurrency(goalAmount));



           ...