JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div class="row">
  <div class="col-6">
     <div id="da-demographics" class="col-12">
        <canvas id="demographics" width="50" height="50"></canvas>
    </div>
    <div id="da-age" class="col-12">
        <canvas id="age" width="50" height="50"></canvas>
    </div> 
  </div>
  <div class="da-sex col-6">
         <!-SEX-->
        <div class="da-gender">
           <canvas id="gender" width="50" height="50"></canvas>
        </div>
        <div class="row">
           <div id="daFemale" class="da-sex-female col-6">
          <div class="da-sex-circle" id="daFemaleCircle"></div>
          <div class="da-sex-text male"></div>
          <div class="da-sex-female-icon">
            <svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path fill="#ea318c" d="M190.4,148.6L161,252.9c-6.3,22.8,20.7,31.7,27.3,10.3l26.3-96.2h7.4l-45.2,169H219v127c0,23,32,23,32,0V336h10v127   c0,23,31,23,31,0V336h43.4l-46.2-169h8.4l26.3,96.2c6.5,21.9,33.3,12.5,27.3-10.2l-29.4-104.4c-4-11.8-18.2-32.6-42-33.6h-47.3   C207.9,116,193.8,136.6,190.4,148.6z"/><path fill="#ea318c" d="M292.6,69.2c0-20.6-16.4-37.3-36.6-37.3c-20.2,0-36.6,16.7-36.6,37.3c0,20.6,16.4,37.3,36.6,37.3   C276.2,106.5,292.6,89.8,292.6,69.2z"/></g></svg>
          </div>
        </div>
        <div id="daMale" class="da-sex-male col-6">
          <div class="da-sex-circle"...

CSS

.da-location {
  text-align:center;
}
.da-fahrenheit {
  text-align:center;
}

/* SUNNY */
.sunny { 
	animation: sunny 15s linear infinite;
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
	height: 140px;
	width: 20px; 
	position: absolute;
	top: 20px;
}
.sunny:before {
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
	content: ''; 
	height: 140px; 
	width: 20px;
	opacity: 1; 
	position: absolute;
	bottom: 0px;
	left: 0px; 
	transform: rotate(90deg);
}
.sunny:after {
	background: #FFEE44; 
	border-radius: 50%; 
	box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
	content: '';  
	height: 80px;
	width: 80px;  
	position: absolute; 
	left: -30px; 
	top: 30px;
}
@keyframes sunny { 
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* CLOUDY */
.cloudy {
	animation: cloudy 5s ease-in-out infinite;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 
		#FFFFFF 65px -15px 0 -5px, 
		#FFFFFF 25px -25px, 
		#FFFFFF 30px 10px, 
		#FFFFFF 60px 15px 0 -10px, 
		#FFFFFF 85px 5px 0 -5px;
	height: 50px;
	width: 50px; 
	position: absolute;
	top: 70px; 
}
.cloudy:after {
	animation: cloudy_shadow 5s ease-in-out infinite;
	background: #000000;
	border-radius: 50%;
	content: '';
	height: 15px;
	width: 120px;
	opacity: 0.2;
	position: absolute;
	left: 5px; 
	bottom: -60px;
  transform: scale(1);
}
@keyframes cloudy {
	50% { transform: translateY(-20px); }
}
@keyframes cloudy_shadow {
	50% { transform: translateY(20px) scale(.7); opacity:.05; }
}

/* RAINY */
.rain {
	animation: rain 5s ease-in-out infinite 1s;
	background: #CCCCCC; 
	border-radius: 50%;
	box-shadow: 
		#CCCCCC 65px -15px 0 -5px, 
		#CCCCCC 25px -25px, 
		#CCCCCC 30px 10px, 
		#CCCCCC 60px 15px 0 -10px, 
		#CCCCCC 85px 5px 0 -5px;
	display: block;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 70px;
}
.rain:after {
	animation: rain_shadow 5s ease-in-out infinite...

JavaScript

$('.male')


var barMale = new ProgressBar.Circle(daMaleCircle, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#5298c5',
  trailColor: '#e6e6e6',
  trailWidth: 1,
  svgStyle: null,
            step: function(state, circle) {
		    var value = Math.round(circle.value() * 100);
		    if (value === 0) {
		      circle.setText('');
		    } else {
		      circle.setText(value);
		    }

		  }
});

var barFemale = new ProgressBar.Circle(daFemaleCircle, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#ed2f8a',
  trailColor: '#e6e6e6',
  trailWidth: 1,
  svgStyle: null,
          step: function(state, circle) {
		    var value = Math.round(circle.value() * 100);
		    if (value === 0) {
		      circle.setText('');
		    } else {
		      circle.setText(value);
		    }

		  }
});

barMale.animate(1, function () {
  barMale.animate((42 / 100));
});

barFemale.animate(1, function () {
  barFemale.animate((58 / 100));
});





var gender = {
    type: "pie",
    labels: ["Male", "Female"],
    title: "Gender",
    datasets: [
        {
            backgroundColor: ["#8eb9f6", "#ea318c"],
            data: [42,58]
        }
    ]
};

var demographics = {
    type: "pie",
    options: {
        legend: {
            display: false
        }
    },
    labels: ["White", "Black or African American", "Hispanic", "Asian"],
    title: "Demographics",
    datasets: [{
        backgroundColor: ["#8eb9f6", "#b5c244", "#e4b859", "#d73425"],
        data: [55,23,12,10]
    }]
}
var ageLabels = ["<5","5-9","10-14","15-17","18-19","20","21","22-24","25-29","30-34","35-39","40-44","45-49","50-54","55-59","60-64","65-69","70-74","75-79","80-84","85>"];
var ageValues = [104,94,102,58,50,13,25,44,88,102,63,73,100,111,90,39,38,21,30,27,22];



var age = {
    type: "horizontalBar",
    options: {
        legend: {
            display: false
        }
    },
    labels: ageLabels,
    title: "Age",
    datasets: [{
        backgroundColor:...