JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="col-sm-3">
        <div id="trackingContainer" class="donut_outline" style="width:100%; height:300px;"></div>
        <div class="total" id="tracking_middle"></div>
    </div>
    <div class="col-sm-3">
        <div id="planningContainer" class="donut_outline" style="width:100%; height:300px;"></div>
        <div class="total" id="planning_middle"></div>
    </div>
    <div class="col-sm-3">
        <div id="badgesContainer" class="donut_outline" style="width:100%; height:300px;"></div>
        <div class="total" id="badges_middle"></div>
    </div>
    <div class="col-sm-3">
        <div id="courseReviewsContainer" class="donut_outline" style="width:100%; height:300px;"></div>
        <div class="total" id="reviews_middle"></div>
    </div>
</div>

CSS

.total {
    margin: 0;
    position: absolute;
    top: 48%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
.inner_donut {
    font-family:impact, sans-serif;
    font-size:70px;
    font-weight:bold;
}

JavaScript

var completed_courses = 5;
        var completed_courses_string = "Completed\xA0Courses: " + completed_courses;
        var remaining_tracking = 32 - completed_courses;
        var remaining_tracking_string = "Remaining\xA0Courses:" + remaining_tracking;

        var planned_courses = 12;
        var planned_courses_string = "Planned Courses: " + planned_courses;
        var remaining_planning = 32 - planned_courses;
        var remaining_planning_string = "Courses to Plan: " + remaining_planning;

        var badges_earned = 0;
        var badges_earned_string = "Badges Earned: " + badges_earned;
        var badges_remaining = 10 - badges_earned;
        var remaining_badges_string = "Unearned Badges: " + badges_remaining;

        var courses_reviewed = 4;
        var courses_reviewed_string = "Courses Reviewed: " + courses_reviewed;
        var reviews_remaining = 32 - courses_reviewed;
        var reviews_remaining_string = "Need to Review: " + reviews_remaining;

        document.getElementById('tracking_middle').innerHTML = "<div class=inner_donut>" + completed_courses + "</div>";
        document.getElementById('planning_middle').innerHTML = "<div class=inner_donut>" + planned_courses + "</div>";
        document.getElementById('badges_middle').innerHTML = "<div class=inner_donut>" + badges_earned + "</div>";
        document.getElementById('reviews_middle').innerHTML = "<div class=inner_donut>" + courses_reviewed + "</div>";

        //colorSet Array
        CanvasJS.addColorSet("blueAndWhiteColors", [
            "#B3DAED",
            "white"]);

        var trackingData = [{
            y: completed_courses,
            legendText: completed_courses_string
        }, {
            y: remaining_tracking,
            legendText: remaining_tracking_string
        }];

        var planningData = [{
            y: planned_courses,
            legendText: planned_courses_string
        }, {
            y: remaining_planning,
            legendText:...