JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<link rel="stylesheet" href="https://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
  <div ng-app>
    <label class="col-xs-6 control-label">Applied to late charge:</label>

    <div class="col-xs-6">
        <input class="form-control" type="number" ng-model="a1">
    <label class="col-xs-6 control-label">Applied to balance:</label>

    <div class="col-xs-6">
        <input class="form-control" type="number" ng-model="b1">
    <label class="col-xs-6 control-label">Applied to maturity
    interest:</label>

    <div class="col-xs-6">
        <input class="form-control" type="number" ng-model="c1">
    <label class="col-xs-6 control-label">Applied to nsf charge:</label>

    <div class="col-xs-6">
        <input class="form-control" type="number" ng-model="d1">
    <label class="col-xs-6 control-label">Amount tendered:</label>

    <div class="col-xs-6">
        <input class="form-control" type="number" ng-model="e1">
    <label class="col-xs-6 control-label">Change due:</label>

    <div class="col-xs-6">
        <div>
            <h3>{{ e1 - (a1+b1+c1+d1) | currency}} </h3>
        </div> 
    </div>