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>
        <ul class="form">
            <form name="toolForm">
                <li class="li-1">
                    <div class="li-title">
                        <h2>Phone</h2>
                    </div>
                    <div class="tool">
                        <input type="text" name="name" id="name-1">
                    </div><!--tool-->
                    <div class="weight">
                        <h3>Weight:</h3>
                        <input type="number" name="number-1" id="number-1" class="number">
                    </div><!--weight-->
                </li>
                <li>
                    <div class="li-title">
                        <h2>Email</h2>
                    </div>
                    <div class="tool">
                        <input type="text" name="name" id="name-2">
                    </div><!--tool-->
                    <div class="weight">
                        <h3>Weight:</h3>
                        <input type="number" name="number-2" id="number-2" class="number">
                    </div><!--weight-->
                </li>
                <li class="li-1">
                    <div class="li-title">
                        <h2>Text/SMS</h2>
                    </div>
                    <div class="tool">
                        <input type="text" name="name" id="name-3">
                    </div><!--tool-->
                    <div class="weight">
                        <h3>Weight:</h3>
                        <input type="number" name="number-3" id="number-3" class="number">
                    </div><!--weight-->
                </li>
                <li>
         ...

CSS

#content {
    font-family: arial, sans-serif;
    color: #595A59;

}

h2 {
    font-weight: normal;

}

#content .form {
    display: inline-block;
    vertical-align: top;
    width: 450px;

}

#content .form form .li-1 {
    background: #d0e4f8;
}

#content .form form li {
    padding: 0;
    background: #f1f5f9;

}

#content #print {
    display: inline-block;
    width: 200px;
    vertical-align: top;

}

#content .chart-container {
    width: 700px;
    height: 700px;
    display: inline-block;


}

#content #donutchart {
    width: 100%;
    height: 500px;

}

#content .form form #submit {
    width: 135px;
    padding: 5px 5px;
    font-size: 16px;
    height: 30px;
    color: white;
    background: #82befb;
    border: none;
    cursor: pointer;
    margin: 10px 0 0 0;

}

#content #print button {
    font-size: 24px;
    padding: 5px 0 0 0;
    color: #d35c4c;
    border: none;
    cursor: pointer;
    background: none;
    margin: 0 0 0 20px;
    vertical-align: text-bottom;


}

#content #print {
    margin: 140px 0 0 0;

}

#content #print ul li {
    font-size: 22px;
    list-style-type: none;
    padding: 0;
    margin: -15px 0 0 0;

}

#content .form form #submit:hover {
    background: #6694c3;

}

#content #print button:hover{
    color: #a24539;

}

#content .form form input {
    height: 20px;
    font-size: 12px;
    color: #595A59;
    display: inline-block;
    padding: 0 5px;
    width: 150px;
    margin: 7px 0 0 0;
    border: none;

}

#content .form form .number {
    width: 45px;
    padding: 0 5px;
    height: 20px;

}

#content h1 {
    color: #595A59;

}

#content h2 {
    font-size: 16px;
    margin: 0;
    padding:0;

}

#content h3 {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

#content div {
    display: inline-block;
    margin: 0 2% 0 0;


}

#content .form form .button {
    margin: 0 0 0 0;

}

#content .form form li {
    list-style-type: none;

}

#content .form form .li-title...