JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
     <h1>
        <img src="http://i.imgur.com/8z5IK9G.png" alt="Reddcoin Icon" class="reddcoinIcon" />
        Reddcoin Stake Calculator
    </h1>

</div>
<div class="mainContainer">
    <input type="text" id="initialRdd" />
    <button id="calculateButton">Calculate</button>
    <div id="errorMessage">^ This should be a number.</div>
    <div id="results">
        <p>Enter your total Reddcoin above to see your stake returns.</p>
    </div>
</div>
    
    <p class="small">
        I'm not positive this is accurate. 
        If it's wrong please fix it and/or blame hoppi.
    </p>
    
    <script type="text/html" id="resultRowTemplate">
        <div class="resultText">
            Estimated ${label} gain:
        </div>
        <div class="resultAmount">
            ${amount} RDD
        </div>
        <hr class="clear" />
    </script>

CSS

html {
    font-family:arial;
}
.small{
    text-align:center;
    color:#888;
    font-size:11px;
}
.header {
    padding:10px;
    background-color: #444;
    color:#FFF;
    border-bottom:1px solid #111;
}
h1 {
    margin:0;
    margin-left:10px;
}
input {
    height:20px;
    font-size:16px;
    padding:4px;
    width:75%;
}
button {
    float: right;
    text-transform: uppercase;
    width: 20%;
    background-color: #444;
    color: #fff;
    font-size: 17px;
    padding: 5px;
    border: 1px solid #111;
    border-radius: 4px;
    margin: 0px;
}
.reddcoinIcon {
    margin-right: 20px;
    width: 30px;
    float: left;
}
#results{
    margin-top:20px;
}
#errorMessage {
    margin-top:10px;
    display:none;
    font-size:12px;
    text-align:center;
    border:1px solid #ff6462;
    background-color: #ffefd5;
    border-radius: 5px;
    padding:5px;
}
.clear{
    clear:both;
}
.resultText,
.resultAmount{
    padding:5px;
    width:40%;
    float:left;
    color:#444;
}
.resultAmount{
    text-align:right;
    color:#111;
    width:32%;
}

.mainContainer {
    padding:20px;
    border:1px solid #999;
    border-top:none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-bottom:50px;
    
}

JavaScript

var exports = {};
var RDD = exports;

(function (exports) {
    var pri = {
        $results: false,
        $calculateButton: false,
        $initialRdd: false,
        $errorMessage: false,
        resultRowTemplate: '',
        validNumberCallback: function () {}
    },
    pub = {};

    pri.loadDomObjects = function () {
        pri.$results = $("#results");
        pri.$calculateButton = $("#calculateButton");
        pri.$initialRdd = $("#initialRdd");
        pri.$errorMessage = $("#errorMessage");
        pri.resultRowTemplate = $("#resultRowTemplate").html();
    };

    pri.calculateClicked = function () {
        var value = pri.$initialRdd.val(),
            initialRedd = parseFloat(value.replace(/,/g, ''));

        pri.$errorMessage.hide();
        pub.clear();

        if (isNaN(initialRedd)) {
            pri.$errorMessage.show("slow");
            return;
        }
        pri.validNumberCallback(initialRedd);
    };

    pub.setValidNumberCallback = function (callback) {
        pri.validNumberCallback = callback;
    };

    pub.clear = function () {
        pri.$results.empty();
    };

    pub.renderResultRow = function (label, amount) {
        var template = pri.resultRowTemplate,
            html = template.replace('${label}', label).replace('${amount}', amount);
        pri.$results.append(html);
    };

    pub.bind = function () {
        pri.loadDomObjects();
        pri.$calculateButton.click(pri.calculateClicked);
    };

    exports.View = pub;
}(exports));


(function (exports) {
    var pri = {
        initialRedd: 0,
        annualGain: 0
    },
    pub = {};

    pub.calculate = function (initialRedd) {
        //according to hoppi
        //total = currentRDD * (1+(0.06/1095)) ** 1095
        var totalMints = 365 * 3,
            total = initialRedd * Math.pow((1 + (0.06 / totalMints)), totalMints);

        pri.initialRedd = initialRedd;
        pri.annualGain = total - initialRedd;
    };

    pub.getAnnual = function () {
 ...