JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<div class="testw3">
			<ul class="testw4">
				<li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum Link</a>
						</div>
					</a>
				</li>
        <li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum Link</a>
						</div>
					</a>
				</li>
        <li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum Link</a>
						</div>
					</a>
				</li>
        <li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum Link</a>
						</div>
					</a>
				</li>
        <li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum Link</a>
						</div>
					</a>
				</li>
        <li>
					<a href="placeholder.html">
						<span class="testcircle"><span class="testnumber">10</span></span>
						<div class="testtext">Title</div>
						<div class="testw5">
							<p>Lorem ipsum dolor sit amet.</p>
							<a href="placeholder.html">Lorem Ipsum...

JavaScript

jQuery(document).ready(function($) {
	  
		
		var circles = $('.testcircle').length,
				halfcircles = circles / 2;	
		
		function colorStrToIntArray(color) {
			if (color.length == 4 || color.length == 7) {
					color = color.substr(1);
			}
			if (color.length == 3) {
				var r = parseInt(color.substr(0, 1) + color.substr(0, 1), 16),
						g = parseInt(color.substr(1, 1) + color.substr(1, 1), 16),
						b = parseInt(color.substr(2, 1) + color.substr(2, 1), 16);
		
				return [r, g, b];
			} 
			else if (color.length == 6) {
				return [
					parseInt(color.substr(0, 2), 16), 
					parseInt(color.substr(2, 2), 16), 
					parseInt(color.substr(4, 2), 16)
				];
			}
			return false;
		}
		
		function calculateSteps(color1, color2, steps) {
			var output = [],
					start = colorStrToIntArray(color1),
					end = colorStrToIntArray(color2);
			var calculate = function(start, end, step) {
				return start + Math.round((end - start) * (step / (steps / 2)));
			};
			for ( var i = 0; i < steps; i++ ) {
				var color = [0, 0, 0];
				color[0] = calculate(start[0], end[0], i);
				color[1] = calculate(start[1], end[1], i);
				color[2] = calculate(start[2], end[2], i);
				output.push(color);
			}
			return output;
		}
		
		var colors = calculateSteps("#f29111", "#e60000", halfcircles),
				colors2 = calculateSteps("#d20911", "#22637e", halfcircles),
				cars = $('.testcircle');
				index = 0;

		$('.testcircle').each(function() {
			var $carrot = $("<div>", {"class": "testw6"});
			$(this).closest('li').find('.testw5').prepend($carrot);
			if (index < halfcircles) { 
				$(this).css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' + colors[index][2] + ')');
				$(this).closest('li').find('.testw5').css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' + colors[index][2] + ')');
				$(this).closest('li').find('.testw6').css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' +...