JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 603 432" xml:space="preserve" id="svg-skills-expertise">
	
	<polyline id="axes" points="59,0 59,337.299 603,337.299"/>
	<g id="v-bars" transform="translate(0, 337.299) scale(1, -1)">
		<rect class="light" x="67" y="0" width="59.858" height="309.522"/>
		<rect class="dark" x="135.021" y="0" width="59.858" height="276.484"/>
		<rect class="light" x="203.041" y="0" width="59.857" height="227.168"/>
		<rect class="dark" x="271.061" y="0" width="59.858" height="201.097"/>
		<rect class="light" x="339.082" y="0" width="59.857" height="140.743"/>
		<rect class="dark" x="407.102" y="0" width="59.857" height="295.851"/>
		<rect class="light" x="475.121" y="0" width="59.859" height="321.301"/>
		<rect class="dark" x="543.143" y="0" width="59.857" height="165.981"/>
	</g>

	<g id="x-axis" >
		<g id="text-x-axis" class="text-svg">
			<text transform="translate(34.5625,409.8232) rotate(-45)">HTML &amp; CSS</text>
			<text transform="translate(78.3281,434.0566) rotate(-45)">Web Standards</text>
			<text transform="translate(157.6816,422.7031) rotate(-45)">Accessibility</text>
			<text transform="translate(253.4863,394.8965) rotate(-45)">jQuery</text>
			<text transform="translate(303.1426,413.2422) rotate(-45)">Javascript</text>
			<text transform="translate(330.9795,433.5605) rotate(-45)">
				<tspan x="0" y="0">Cross-browser    </tspan>
				<tspan x="28.248" y="14">Compatibility</tspan>
			</text>
			<text transform="translate(439.0996 413.2852) rotate(-45)">Photoshop</text>
			<text transform="translate(528.5908 391.791) rotate(-45)">Mobile</text>
		</g>
		<g>
			<polyline points="19.813,434.077 104.187,349.703 104.187,337.299"/>
			<circle cx="104.187" cy="337.299" r="3"/>
		</g>
		
		<g>
			<polyline points="87.813,434.077 172.187,349.703 172.187,337.299"/>
			<circle cx="172.187" cy="337.299" r="3"/>
		</g>
		<g>
			<polyline...

CSS

@font-face {
				font-family: 'Novecentowide';
				src: url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.eot');
				src: url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.woff') format('woff'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.ttf') format('truetype'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.svg#NovecentowideMedium') format('svg');
				font-weight: 600;
				font-style: normal;
			
			}
			.text-svg text,
			.text-svg text tspan {fill:#839197; font-family:Novecentowide; font-weight:600; font-size:12px;}
			circle {fill:#005B88;}
			polyline {fill:none; stroke:#839197; stroke-miterlimit:10;  }
			rect {width:159.858;}
			text {text-align:right;}
			.light {fill:#009ADE;}
			.dark {fill:#0071AA;}
			.axes {stroke:#005B88; stroke-linecap:round;}

JavaScript

$(function(){
    var $theBars = $("#v-bars").children();
	var BarsHeight = $theBars.each(function(index, element ) {
        var origHeight = $(this).attr("height");
        console.log( index + ": " + $(this).attr("height"));
		console.log( index + ": " + $(this).height());
    });
});