JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<body>

	<div id="page-wrap">
		
	  <h1>Progress Bars</h1>
	  
	  <p>They should stretch fine to whatever the width of the container element is, 
	  or just set it. Also they should stretch fine to whatever height you give .meter. </p>

		<div class="meter">
			<span style="width: 25%"></span>
		</div>
		<pre><code>&lt;div class=&quot;meter&quot;&gt;
	&lt;span style=&quot;width: 25%&quot;&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
		
		<div class="meter orange nostripes">
			<span style="width: 33.3%"></span>
		</div>
		<pre><code>&lt;div class=&quot;meter orange nostripes&quot;&gt;
	&lt;span style=&quot;width: 33.3%&quot;&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>		
		
		<div class="meter red">
			<span style="width: 80%"></span>
		</div>
		<pre><code>&lt;div class=&quot;meter red&quot;&gt;
	&lt;span style=&quot;width: 80%&quot;&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>	

		<div class="meter animate">
			<span style="width: 50%"><span></span></span>
		</div>
		<pre><code>&lt;div class=&quot;meter animate&quot;&gt;
	&lt;span style=&quot;width: 50%&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>		

	</div>
	
</body>

CSS

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 490px; margin: 80px auto; }

body { background: #333; text-align: center; color: #eee; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
h1 { font-size: 42px; font-weight: 600; margin: 0 0 30px 0; }

pre {
	background: black;
	text-align: left;
	padding: 20px;
	margin: 0 auto 30px auto; 
}
.meter { 
			height: 20px;  /* Can be anything */
			position: relative;
			margin: 60px 0 20px 0; /* Just for demo spacing */
			background: #555;
			-moz-border-radius: 25px;
			-webkit-border-radius: 25px;
			border-radius: 25px;
			padding: 10px;
			-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
			-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
			box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
		}
		.meter > span {
			display: block;
			height: 100%;
			   -webkit-border-top-right-radius: 8px;
			-webkit-border-bottom-right-radius: 8px;
			       -moz-border-radius-topright: 8px;
			    -moz-border-radius-bottomright: 8px;
			           border-top-right-radius: 8px;
			        border-bottom-right-radius: 8px;
			    -webkit-border-top-left-radius: 20px;
			 -webkit-border-bottom-left-radius: 20px;
			        -moz-border-radius-topleft: 20px;
			     -moz-border-radius-bottomleft: 20px;
			            border-top-left-radius: 20px;
			         border-bottom-left-radius: 20px;
			background-color: rgb(43,194,83);
			background-image: -webkit-gradient(
			  linear,
			  left bottom,
			  left top,
			  color-stop(0, rgb(43,194,83)),
			  color-stop(1, rgb(84,240,84))
			 );
			background-image: -moz-linear-gradient(
			  center bottom,
			  rgb(43,194,83) 37%,
			  rgb(84,240,84) 69%
			 );
			-webkit-box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.3),
			  inset 0 -2px 6px...

JavaScript

$(function() {
			$(".meter > span").each(function() {
				$(this)
					.data("origWidth", $(this).width())
					.width(0)
					.animate({
						width: $(this).data("origWidth")
					}, 1200);
			});
		});