JSFiddle - React, Tailwind, and code Playground

by MythOfEchelon

HTML

<!-- This is just my HTML5 template. Make sure you set this up correctly for your personal needs. -->

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            html {
                font: 16px "Segoe UI", "Segoe WPC", Helvetica, Arial, "Arial Unicode MS", Sans-Serif;
            }
            
            div {
                float: left;
            }
            
            #form_Order_Hours, #form_Order_Guests {
                width: 50px;
            }
        </style>
        
        <script>
            function calc(){
                var form_Order_Cost_Element = document.getElementById("form_Order_Cost");
                
                var form_Order_Hours_Value = document.getElementById("form_Order_Hours").value;
                var form_Order_Guests_Value = document.getElementById("form_Order_Guests").value;
                var form_Order_oakBluffs_Value = document.getElementById("form_Order_oakBluffs").checked;
                var form_Order_Fishing_Value = document.getElementById("form_Order_Fishing").checked;
                
                var cost_Hour_Base = 275;
                var cost_Guest_Base = 15;
                var cost_oakBluffs_Base = 20;
                var cost_Fishing_Base = 50;
                
                var cost_Hour_Total = form_Order_Hours_Value * cost_Hour_Base;
                var cost_Guest_Total = form_Order_Guests_Value * cost_Guest_Base;
                if (form_Order_oakBluffs_Value == true){
                    var cost_oakBluffs_Total = cost_oakBluffs_Base;
                } else {
                    var cost_oakBluffs_Total = 0;
                }
                if (form_Order_Fishing_Value == true){
                    var cost_Fishing_Total = cost_Fishing_Base;
                } else {
      ...