JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="estimate-form" class="cf">

                    <form action="index.php" method="post" target="form_target" id="estimator_form">
                        <input type="hidden" name="action" value="estimate">
                        <table id="estimator_table" cellspacing="0" cellpadding="0">
                            <thead>
                                <tr>
                                    <th colspan="5" class="project-title">Project Title:</th>
                                    <th colspan="1" class="rate">Default Rate:</th>
                                </tr>

                                <tr>
                                    <td colspan="5" class="project-title big">
                                        
                                            <input type="text" id="title_field" name="title_field" value="Untitled Project" style="display: none; ">
                                            <span class="title" id="title_label" style="display: inline; ">Untitled Project</span>
                                            <a id="title_edit" title="Edit Title" style="" href="#" onclick="estimator_edit_title()" rel="nofollow" class="edit">Edit</a>
                                            <a id="title_save" style="display:none" href="#" onclick="estimator_save_title()" rel="nofollow" class="save">Save</a>
                                    </td>
                                    <td colspan="1" class="rate big">

                                        <select id="currency_field" name="currency_field" style="display: none; "><option value="$" selected="selected">$</option><option value="£">£</option><option value="€">€</option><option value="¥">¥</option></select>
                                        <input type="text" id="default_rate_field" name="default_rate_field" value="0" style="display: none; ">
                                        <span id="currency_label" style="display: inline; " class="currency">$</span> <span...

CSS

/* ------------------------------------------------------------
    Web Development Project Estimator
------------------------------------------------------------ */

/* ------------------------------------------------------------
    Estimate Form Table
------------------------------------------------------------ */

#estimate-form {
    display: inline;
    max-width: 600px;
    margin: 0 20px 15px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
#estimate-form table {
    max-width: 600px;
    width: 100%;
    line-height: 18px;
}
#estimate-form thead th {
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    color: #8d8984;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
#estimate-form thead th.project-title,
#estimate-form thead th.rate {
    padding-left: 15px;
    text-align: left;
}
#estimate-form thead .col-heads th {
    padding-top: 10px;
}
#estimate-form thead td {
    border-bottom: 1px solid #edeceb;
    border-bottom: 2px groove rgba(255,255,255,.5);
    padding: 8px 0 8px 15px;
}
#estimate-form thead td.project-title {
    vertical-align: top;
}
#estimate-form thead td .title {
    display: inline;
    line-height: 1.25em;
    float: left;
    padding-right: 10px;
}
#estimate-form thead #title_field,
#estimate-form thead #default_rate_field {
    margin-right: 10px;
}
#estimate-form thead td .currency {
    display: inline;
    line-height: 1.25em;
    float: left;
}
#estimate-form thead td .default_rate {
    display: inline;
    line-height: 1.25em;
    float: left;
    padding-right: 10px;
}
#estimate-form thead td.rate:hover {
    background: #ffe094;
}
#estimate-form thead td a {
    display: none;
    float: left;
    font-size: 11px;
    line-height: 24px;
    font-weight: normal;
}
#estimate-form thead td a.edit {
    float: left;
    display: none;
    width: 16px;
    padding: 16px 0 0 0;
    overflow: hidden;
    height: 0px !important; 
    background:...

JavaScript

/**
 *The following code fixes one of Microsoft's little presents to the developer community:
 */
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}

//fix both IE and Opera (adjust when they implement this method properly)
if(isOpera || isIE){
  document.nativeGetElementById = document.getElementById;
  //redefine it!
  document.getElementById = function(id){
    var elem = document.nativeGetElementById(id);
    if(elem){
      //verify it is a valid match!
      if(elem.attributes['id'] && elem.attributes['id'].value == id){
        //valid match!
        return elem;
      } else {
        //not a valid match!
        //the non-standard, document.all array has keys for all name'd, and id'd elements
        //start at one, because we know the first match, is wrong!
        for(var i=1;i<document.all[id].length;i++){
          if(document.all[id][i].attributes['id'] && document.all[id][i].attributes['id'].value == id){
            return document.all[id][i];
          }
        }
      }
    }
    return null;
  };
}
/**Micro-unFUBAR done

/**
 * Global variable to track the index of the next row to be added.
 */
var estimator_next_row_index = 15;

/**
 * Switches a Task label to an input box.
 */
function estimator_edit_task(i){

    document.getElementById('task_field_' + i).style.display = 'inline';
    document.getElementById('task_label_' + i).style.display = 'none';
    document.getElementById('task_edit_' + i).style.display = 'none';
    document.getElementById('task_delete_' + i).style.display = 'none';
    document.getElementById('task_save_' + i).style.display = '';

}

/**
 * Removes a Task Row.
 */
function estimator_delete_task(i){

    var tbody_element, j;

    tbody_element = document.getElementById('estimator_tbody');

    for(j = 0; j<tbody_element.rows.length; j++){

        if(tbody_element.rows.item(j).id == 'task_row_' + i){
     ...