JSFiddle - React, Tailwind, and code Playground
by Sub Taper
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="content">
<div class="chart-container">
<div id="donutchart"></div>
</div>
<div id="print"></div>
<div class="form">
<form>
<div class="tool">
<h2>Tool:</h2>
<input type="text" name="name" id="name">
</div><!--tool-->
<div class="weight">
<h2>Weight:</h2>
<input type="number" name="number" id="number">
</div><!--weight-->
<div class="button">
<input type="submit" value="Add" id="submit">
</div><!--button-->
</form>
</div>
</div><!--content-->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var dataArray = [
['Task', 'Hours per Day']
];
function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Property Management Solutions',
titleTextStyle: {
color: '#595A59',
fontSize: 36
},
pieHole: 0.4,
fontSize: 24,
chartArea: {
top: 150
},
legend: {
...