JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="">
					<style>
						@-webkit-keyframes move33 {
							0% { width: 0;}
							100% { width: 33%; }
						}

						@keyframes move33 {
							0% { width: 0; }
							100%   { width: 33%; }
						}
						
						div.poll_animation33 {
							-webkit-animation: move 3s linear 0s normal none infinite, move33 6s linear 0s normal none 1;
							animation: move 3s linear 0s normal none infinite, move33 6s linear 0s normal none 1;
						}
					</style>
					<dd class="resultbar"><div class="meter"><div style="width:33%; max-width:33%;" class="poll_animation33 pollbar2">&nbsp;</div></div></dd>
				</dl>
			
				<dl class="">
					<style>
						@-webkit-keyframes move67 {
							0% { width: 0;}
							100% { width: 67%; }
						}

						@keyframes move67 {
							0% { width: 0; }
							100%   { width: 67%; }
						}
						
						div.poll_animation67 {
							-webkit-animation: move 3s linear 0s normal none infinite, move67 6s linear 0s normal none 1;
							animation: move 3s linear 0s normal none infinite, move67 6s linear 0s normal none 1;
						}
					</style>
					<dd class="resultbar"><div class="meter"><div style="width:67%; max-width:67%;" class="poll_animation67 pollbar4">&nbsp;</div></div></dd>
				</dl>
			
				<dl class="">
					<style>
						@-webkit-keyframes move100 {
							0% { width: 0;}
							100% { width: 100%; }
						}

						@keyframes move100 {
							0% { width: 0; }
							100%   { width: 100%; }
						}
						
						div.poll_animation100 {
							-webkit-animation: move 3s linear 0s normal none infinite, move100 6s linear 0s normal none 1;
							animation: move 3s linear 0s normal none infinite, move100 6s linear 0s normal none 1;
						}
					</style>
					<dd class="resultbar"><div class="meter"><div style="width:100%; max-width:100%;" class="poll_animation100 pollbar5">&nbsp;</div></div></dd>
				</dl>

CSS

/* CoolPoll (http://phpbb.tttz.ru)
-----------------------------v.1.0.0--- */

.pollbar1 {
	background-color: #0000ff; /* blue */
	background-image: linear-gradient(
	135deg, rgba(0, 0, 128, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(0, 0, 128, 0.2) 50%, 
	rgba(0, 0, 128, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar2 {
	background-color: #2BC253; /* green */
	background-image: linear-gradient(
	135deg, 
	rgba(84, 240, 84, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(84, 240, 84, 0.2) 50%, 
	rgba(84, 240, 84, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar3 {
	background-color: #FFD800; /* yellow */
	background-image: linear-gradient(
	135deg, 
	rgba(216, 177, 0, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(216, 177, 0, 0.2) 50%, 
	rgba(216, 177, 0, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar4 {
	background-color: #f1a165; /* orange */
	background-image: linear-gradient(
	135deg, 
	rgba(243, 109, 10, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(243, 109, 10, 0.2) 50%, 
	rgba(243, 109, 10, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar5 {
	background-color: #f0a3a3; /* red */
	background-image: linear-gradient(
	135deg, rgba(244, 35, 35, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(244, 35, 35, 0.2) 50%, 
	rgba(244, 35, 35, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

@-webkit-keyframes move {
	0% {background-position: 0 0;}
	100% {background-position: 100px 50px;}
}

@keyframes move {
  0% { background-position: 0 0; }
  100%   { background-position: 100px 50px; }
}

.meter{ 
	height: 15px;
	position: relative;
	margin: 0;
	padding: 0 !important;
	background: #7DA0D3;
	border-radius: 25px;
	box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
}

.meter > div {
	position: relative;
	height: 100%;
	padding: 0 !important;
	border: none;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius:...