JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bucket0"></div>
<div id="bucket0_multi"></div>
<div id="bucket1"></div>
<div id="bucket1_multi"></div>
<div id="bucket2"></div>
<div id="bucket2_multi"></div>
<div id="bucket3"></div>
<div id="bucket3_multi"></div>
<div id="bucket4"></div>
<div id="bucket4_multi"></div>
<div id="result"></div>

JavaScript

function setout(id,out) {
var output = document.getElementById(id)
output.innerHTML = id+" : "+out
}


var workspaceTB = 500
var compression = 50

var bucket0 = Math.min(Math.max(workspaceTB,0),10)
setout("bucket0",bucket0)
var bucket0_multi = bucket0*(compression/100)*1.05
setout("bucket0_multi",bucket0_multi)

var bucket1 = Math.min(Math.max(workspaceTB-10,0),10)
setout("bucket1",bucket1)
var bucket1_multi = bucket1*(compression/100)*0.66
setout("bucket1_multi",bucket1_multi)

var bucket2 = Math.min(Math.max(workspaceTB-20,0),80)
setout("bucket2",bucket2)
var bucket2_multi = bucket2*(compression/100)*0.4
setout("bucket2_multi",bucket2_multi)

var bucket3 = Math.min(Math.max(workspaceTB-100,0),400)
setout("bucket3",bucket3)
var bucket3_multi = bucket3*(compression/100)*0.25
setout("bucket3_multi",bucket3_multi)

var bucket4 = Math.max(workspaceTB-500,0)
setout("bucket4",bucket4)
var bucket4_multi = bucket4*(compression/100)*0.1
setout("bucket4_multi",bucket4_multi)

setout("result",bucket0_multi+bucket1_multi+bucket2_multi+bucket3_multi+bucket4_multi)