JSFiddle - React, Tailwind, and code Playground

HTML

<table width=100%>
 <tr>
<table border=1 width=100%>
    <tr>
        <td width="34%" widh=33%><div class="shoppingCart">
    <h7 class="ui-widget-header">Revenue</h7>
    <div class="ui-widget-content">
            </div></div></td>
        
              <td width="33%" widh=33%>
       </td>

     <td width="33%" widh=33%>
     </td>
    </tr>
                  
                    <tr>
        <td width="34%" widh=33%><div class="shoppingCart">
    <div class="ui-widget-content">
        <ol style="list-style:none">
            <li><b>Sales</b></li>
        </ol>
    </div>
      </div></td>
              
<td width="33%" widh=33%><div>
<div class="ui-widget-content">
        <ol style="list-style:none" id="place1">
            <li class="placeholder">7000</li>
        </ol>
    </div></div></td>
                        <td width="33%" widh=33%></td>
       </tr>
                  
                    <tr>
        <td width="34%" widh=33%><div class="shoppingCart">
   <div class="ui-widget-content">
        <ol style="list-style:none">
            <li><b><font color="#5ca934">To Calcuate Total Revenue</font></b><br/>
                <input type="button" value="click here" id="totalr"/>
                </li>
        </ol>
    </div>
      </div></td>
              <td width="33%" widh=33% ><div class="shoppingCart">
   
      </div></td>
<td width="33%" widh=33%><div class="shoppingCart"id="total1"</li>
        Your total ravenue is display here
    </div></td>


    </tr> 

</table>
<table border=1 width=100%>
    <tr>
        <td width="34%" widh=33%><div class="shoppingCart">
    <h7 class="ui-widget-header">Less: Expenses</h7>
    <div class="ui-widget-content">
            </div></div></td>
              <td width="33%" widh=33%>
       </td>

     <td width="33%" widh=33%>
     </td>
    </tr>
                  
         <tr>
        <td width="34%" widh=33%><div class="shoppingCart">
    <div class="ui-widget-content">
        <ol...

CSS

#products{font: 13px/23px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;
}

li.ui-draggable-dragging{
   list-style:none;
}
.ui-widget-content ul li
{
    display: block;
	float: left;
	line-height: 10px;
	list-style:none;
	margin: 0 02px;
    text-decoration:blink;
    min-height:40px;
}


.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 10px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
     color:#FFFFFF;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: radial-gradient(farthest-corner, rgba(255,...

JavaScript

document.getElementById('totalr').addEventListener('click', function() {
    
        
        $('#total1').text('Your Total Expenses is 7000');
         $("#total1").show();
       
  
        
}, false);



document.getElementById('totale').addEventListener('click', function() {
    
        
        $('#total2').text('Your Total Expenses is 4750');
         $("#total2").show();
       
  
        
}, false);


document.getElementById('totalp').addEventListener('click', function() {
        var sum1 = 0;
        var pattern="";
        var matches="";
        $('#total1').each(function(index)
                     {var pattern = /[0-9]+/g;
                      var matches = $(this).text().match(pattern);
                         sum1 += parseInt(matches);
                     });           
        
         var sum2 = 0;
        var pattern="";
        var matches="";
        $('#total2').each(function(index)
                     {var pattern = /[0-9]+/g;
                      var matches = $(this).text().match(pattern);
                         sum2 += parseInt(matches);
                     });           
                  sum1-=sum2;
    $('#total3').text(sum1);
    var total=document.getElementById('total3').innerHTML;
           if(total=='2250')
       {
        
        $('#total3').text('Your Total Profit is    '+sum1);
         $("#total3").show();  
       }
        else{ 
            $('#total3').text('Please calculate total expenses and revenue first');
            $("#total3").show();
            
        
        }
    
    
}, false);