JSFiddle - React, Tailwind, and code Playground

by RootAccess777

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
                                                                                <body class="top">                                                                 <div class="wrapper">
    <header class="header" id="top">
        <div class="header__content">
            <h1 class="hide">Hilton Concept Financial Modeling Tool</h1>
        </div>
    </header>
    <section class="" id="">
        <div class="container col-md-12">
            <div class="row">
                <div class="col-md-3 left-block">
                    <div class="logo">
                        <img src="" />

                    </div>
                    
                    <form class="form-horizontal">
                        <div class="control-group">
                            <div class="controls">
                                <label>Property Name</lable>
                                <input type="text" id="inputName" placeholder="Property Name">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <label>Room Count</lable>
                              <input type="text" id="numberRooms" placeholder="Number of Rooms" value="150">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                       ...

CSS

.container{
    margin-top: 50px;
}
input {
    color: #34a3db;
    font-weight: bold;
}

select, input{
    width: 100%;
}

.restaurant-size{
    width: 100%;
}

#tarif {
    background-color: #2c3844;
    color: #fff;
}
span { 
    color: #91e8fc;
}
.ui-widget-content{
    background: #6b6b6b;
    border-color: #6b6b6b;
}
.ui-slider-handle {
    background: #c1c2c4;
    border-radius: 0.6em;
}
.ui-slider-range {
    background: #34a3db;
}

.left-block input[type="text"], .rest-total input[type="text"]{
    height: 45px;
    margin-bottom: 20px;
}

label, thead{
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
}

#chief-yes{
    width: 25px;
}

.total-capex{
    margin-top: 25px;
}

JavaScript

var model = {}; //All data
var jqElem = {}; //All form elements

$(function() { //DOM ready OPEN
  //Initialization block START

  jqElem.sliderRangeMin = $("#slider-range-min");
  jqElem.sliderRangeMin2 = $("#slider-range-min2");
  jqElem.sliderRangeMin3 = $("#slider-range-min3");

  jqElem.laborCostSlider = $("#labor-cost-slider");
  jqElem.payrollFteSlider = $("#payroll-fte-slider");
  jqElem.guestCaptureSlider = $("#guest-capture-slider");
  jqElem.menuSlider = $("#menu-slider");
  jqElem.sizeSlider = $("#size-slider");
  jqElem.costSlider = $("#cost-slider");
  jqElem.cogsSlider = $("#cogs-slider");

  jqElem.fteRevenue = $("#fte-revenue");
  jqElem.fteRevenue1 = $("#fte-revenue1");
  jqElem.fteRevenue2 = $("#fte-revenue2");
  jqElem.fteRevenue3 = $("#fte-revenue3");
  jqElem.sizeFeetMeter = $('#size-feet-meter');

  jqElem.numberOfRooms = $('#numberRooms');
  jqElem.preFee = $('#pre-fee');
  jqElem.annualFee = $('#annual-fee');
  jqElem.foodFee = $('#food-sales');
  jqElem.beverageFee = $('#beverage-sales');
  jqElem.walkBreakfast = $('#walk-breakfast');
  jqElem.walkLunch = $('#walk-lunch');
  jqElem.walkDinner = $('#walk-dinner');
  jqElem.beverageBreakfast = $('#beverage-breakfast');
  jqElem.beverageLunch = $('#beverage-lunch');
  jqElem.beverageDinner = $('#beverage-dinner');
  jqElem.fteChief = $('#fte-count-chef');
  jqElem.fteManager = $('#fte-count-manager');
  jqElem.fteBar = $('#fte-count-bar');
  jqElem.fteAdd = $('#fte-count-add');
  jqElem.fteAdd2 = $('#fte-count-add2');
  jqElem.fteAdd3 = $('#fte-count-add3');
  jqElem.pterChief = $('#pter-chef');
  jqElem.pterManager = $('#pter-manager');
  jqElem.pterBar = $('#pter-bar');
  jqElem.pterAdd = $('#pter-add');
  jqElem.pterAdd2 = $('#pter-add2');
  jqElem.pterAdd3 = $('#pter-add3');
  jqElem.bonusChief = $('#bonus-chef');
  jqElem.bonusManager = $('#bonus-manager');
  jqElem.bonusBar = $('#bonus-bar');
  jqElem.bonusAdd = $('#bonus-add');
  jqElem.bonusAdd2 = $('#bonus-add2');
 ...