JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Taxes in a Bernie Sanders America:</h1>
<h2>What will I pay?</h2>

<div>Current Yearly Income<br><input id="income"></div>
<div><input id="calc-button" type="button" value="Calculate"></div>
<div>Your taxes: $<span id="taxes">?</span> (an effective rate of <span id="rate">?</span>%)</div>
<div>
Which is $<span id="higher">?</span>
higher than your current effective rate (<span id="old-rate">?</span>%).
</div>
<div style="cursor:pointer; text-decoration:underline" id="show-info">
Click here to see the tax bracket changes.
</div>
<div id="info" style="display:none">
America has a marginal income tax system.<br>
This means your personal rate is not the rate of your highest bracket.<br>
Instead, it's a mixture of all the brackets you fall into.<br><br>
Let's say there's a $75,000 bracket.<br>
If you didn't make $75,000, of course you don't pay a $75,000 rate.<br>
But if you made $75,001, only that $1 is taxed at the $75,000 rate.<br><br>
This means that even millionaires get the<br>lowest tax rate on their first $18,000.<br><br>
It also means that there is no way you can enter<br>a higher tax bracket and suddenly make less money.<br><br>
<table>
<th>Each dollar you made&nbsp;past...</th>
<th>Tax Before</th>
<th>Tax After</th>
<tr>
  <td>$0 up to $18,450</td><td>10%</td><td>10%</td>
</tr>
<tr>
  <td>$18,450 up to $74,900</td><td>15%</td><td>15%</td>
</tr>
<tr>
  <td>$74,900 up to $151,200</td><td>25%</td><td>25%</td>
</tr>
<tr>
  <td>$151,200 up to $230,450</td><td>28%</td><td>28%</td>
</tr>
<tr>
  <td>$230,450 up to $250,000</td><td>33%</td><td>33%</td>
</tr>
<tr>
  <td>$250,000 up to $411,500</td><td>33%</td><td>37%</td>
</tr>
<tr>
  <td>$411,500 up to $464,850</td><td>35%</td><td>37%</td>
</tr>
<tr>
  <td>$464,850 up to $500,000</td><td>39.6%</td><td>37%</td>
</tr>
<tr>
  <td>$500,000 up to $2 million</td><td>39.6%</td><td>43%</td>
</tr>
<tr>
  <td>$2 million up to $10 million</td><td>39.6%</td><td>48%</td>
</tr>
<tr>
  <td>$10 million and...

CSS

body {
  margin-top: 7%;
  font-family: Sans-Serif;
  text-align: center;
  background: rgb(11, 27, 52);
  color: white;
}

div {
  margin-top: 3%;
}

table { margin: auto }
th { padding: 2%}

a:link,
a:hover,
a:visited {
  color: white
}

JavaScript

var byId = function(id) { return document.getElementById(id); }

var brackets = [
	{stop: 18450, before: 0.10, after: 0.10},
  {stop: 74900, before: 0.15, after: 0.15},
  {stop: 151200, before: 0.25, after: 0.25},
  {stop: 230450, before: 0.28, after: 0.28},
  {stop: 250000, before: 0.33, after: 0.33},
  {stop: 411500, before: 0.33, after: 0.37},
  {stop: 464850, before: 0.35, after: 0.37},
  {stop: 499999, before: 0.396, after: 0.37},
  {stop: 2000000, before: 0.396, after:0.43},
  {stop: 1000000, before: 0.396, after:0.48},
  {stop: Infinity, before: 0.396, after: 0.52}
];

byId('show-info').onclick = function() {
	var current = byId('info').style.display;
	byId('info').style.display = current ? '' : 'none';
}

format = function(n) { return (n|0).toLocaleString(); }
byId('calc-button').onclick = function() {
	var income = parseInt(byId('income').value.replace(',', '').replace('$', ''));
  if (!income) {
  	alert('does not compute! (format like 60000 or 60,000 or $60,000)');
    return;
  }
  var taxTotalBefore = 0, taxTotalAfter = 0;
  var currentBracket = 0, lastBracketStop = 0;
  var incomeLeft = income;
  while (currentBracket < brackets.length && incomeLeft > 0) {
  	var bracket = brackets[currentBracket];
  	var cashAffected = Math.min(incomeLeft, bracket.stop - lastBracketStop);
    taxTotalBefore += cashAffected * bracket.before;
    taxTotalAfter += cashAffected * bracket.after;
    incomeLeft -= cashAffected;
    lastBracketStop = bracket.stop;
    currentBracket++;
  }
  byId('taxes').textContent = format(taxTotalAfter);
  byId('rate').textContent = format(100 * taxTotalAfter / income);
  byId('old-rate').textContent = format(100 * taxTotalBefore / income);
  byId('higher').textContent = format(taxTotalAfter - taxTotalBefore);
}