JSFiddle - React, Tailwind, and code Playground

by abstractcoder

HTML

<div class="container" style="text-align: center">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">What Would Winning More Jobs Do For You?</h3>
                </div>
                <div class="panel-body">
                    <p>
                        You now do about <input name="jobs" type="name" value="30"/> jobs per month with an average price of $<input name="price" type="name" value="1000"/>
                    </p>
                    <p>A <strong>1%</strong> increase in jobs will bring you <strong class="text-success one-percent"></strong> more this year</p>

                    <p>A <strong>5%</strong> increase in jobs will bring you <strong class="text-success five-percent"></strong> more this year</p>

                    <p>A <strong>10%</strong> increase in jobs will bring you <strong class="text-success ten-percent"></strong> more this year</p>

                    <p>We can help you win more jobs by enabling you to quickly deliver professional estimates on site and ensuring that all of your prospects receive follow ups. You will be spend less time doing paper work and more time getting paid.</p>

                    <a href="#" class="btn btn-success btn-lg">Start Winning More Jobs Now</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px;
    font-weight: bold;
}

.btn-success {
    background: rgb(92, 184, 92);
    border: 1px solid rgb(76, 174, 76);
    color: white;
}

.btn-lg {
    font-size: 125%;
}

.btn-success:hover, .btn-success:selected {
    background: rgb(61, 121, 61);
}

.text-success {
    color: rgb(92, 184, 92);
}

.panel {
    max-width: 600px;
    margin: 0 auto;
}

.panel .panel-title {
    text-decoration: underline;
}

strong, input {
    font-size: 125%;
}

input {
    width: 75px;
    text-align: center;
    border: none;
    outline: none;
    background: #fcffa9;
}

JavaScript

jQuery(function(){
    var formatMoney = function(text) {
        return text.toFixed(0).replace(/\d(?=(\d{3})+$)/g, '$&,');
    };
    $('[name=jobs],[name=price]').bind('change keyup', function() {
        var jobs = parseInt($('[name=jobs]').val());
        var price = parseInt($('[name=price]').val());
        if (jobs > 0 && price > 0) {
            $('.one-percent').text('$' + formatMoney(jobs * price * 1 / 100 * 12));
            $('.five-percent').text('$' + formatMoney(jobs * price * 5 / 100 * 12));
            $('.ten-percent').text('$' + formatMoney(jobs * price * 10 / 100 * 12));
        }
    }).trigger('change');
});