JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<section class="wrapper">
		<h1>Transaction Tracker</h1>
		<form class="transaction-frm">
			<fieldset>
				<legend>Add Transaction</legend>
				<div class="frm-group">
					<input class="frm-control" type="text" name="description" size="30" placeholder="description" />
				</div>
				<div class="frm-group">
					<select class="frm-control" name="type">
						<option value="">type</option>
						<option value="debit">debit</option>
						<option value="credit">credit</option>
					</select>
				</div>
				<div class="frm-group">
					<i class="edit fa fa-dollar"></i>
					<input class="frm-control" type="number" name="currency" min="0" max="9999" step="0.01" size="4" placeholder="0.00" />
				</div>
				<div class="frm-group">
					<input class="frm-control" type="submit" value="add" />
				</div>
				<div class="error"></div>
			</fieldset>
		</form>


		<h2>Transactions</h2>


		<table class="transactions">
			<thead>
				<tr>
					<td colspan="4" class="right">
						Total debits: <span class="total debits">$0.00</span>
						Total credits: <span class="total credits">$0.00</span>
					</td>
				</tr>
				<tr>
					<th>Description</th>
					<th>Type</th>
					<th class="amount">Amount</th>
					<th class="tools">Tools</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</section>
	<script src="js/main.js"></script>
</body>

CSS

body {
	font-family: sans-serif;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}
.amount {
    text-align: right!important;
}
.error {
    color: #C51616;
    font-size: .75em;
    margin-top: 10px;
    margin-left: 5px;
}
.fa {
    margin: 0 2px;
}
fieldset {
    border-radius: 6px;
    border: 1px solid #ccc;
}
.frm-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #666;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.frm-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
h2 {
    font-size: 1.25em;
}
input[type=submit] {
    background-color: #ddd;
}
input[type=submit]:hover {
    background-color: #d9edf7;
    cursor: pointer;
}
.right {
    text-align: right;
}
select.frm-control {
    height: 34px;
}
table.transactions {
	background-color: transparent;
	border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
table.transactions>thead {
	display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
table.transactions>thead:first-child>tr:first-child>td {
    border-top: 0;
}
table.transactions>thead>tr>th {
	vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    text-align: left;
    font-weight: bold;
}
table.transactions>tbody {
	display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
table.transactions>tbody>tr:hover {
    background-color: #d9edf7 !important;
}

table.transactions>tbody>tr>td:nth-child(1) {
    width: 550px;
}
table.transactions .fa:hover {
    cursor: pointer;
}
table.transactions tr {
	display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
table.transactions tr.credit {
    background-color: #dff0d8;
}
table.transactions...

JavaScript

document.querySelector('form').addEventListener('submit', function(evt) {

  var transactions = document.querySelector('tbody');
  var debit, credit, moneyText, descriptionText,
    error, td, td2, td3, td4, td5, td6, td7, td8, i, i2;

  description = document.querySelector('input[type="text"]').value;
  money = document.querySelector('input[type="number"]').value;
  money = parseFloat(money).toFixed(2);

  if (document.getElementsByTagName('select')[0].selectedIndex == 0) {
    alert("Please select a payment option");
    document.getElementsByTagName('select')[0].focus();
  }

  if (document.querySelector('input[type="text"]').value == "") {
    alert("Please enter a description");
    document.querySelector('input[type="text"]').focus();
  }

  if (document.querySelector('input[type="number"]').value < 0 || document.querySelector('input[type="number"]').value == "") {
    alert("Please enter a number over 0");
    document.querySelector('input[type="number"]').focus();
  }

  debit = document.createElement('tr');
  credit = document.createElement('tr');
  debitDescriptionText = document.createTextNode(description);
  debitMoneyText = document.createTextNode(money);
  creditDescriptionText = document.createTextNode(description);
  creditMoneyText = document.createTextNode(money);

  td = document.createElement('td');
  td2 = document.createElement('td');
  td3 = document.createElement('td');
  td4 = document.createElement('td');

  td5 = document.createElement('td');
  td6 = document.createElement('td');
  td7 = document.createElement('td');
  td8 = document.createElement('td');

  i = document.createElement('i');
  i2 = document.createElement('i');

  debit.setAttribute('class', 'debit');
  credit.setAttribute('class', 'credit');
  td3.setAttribute('class', 'amount');
  td4.setAttribute('class', 'tools');
  td7.setAttribute('class', 'amount');
  td8.setAttribute('class', 'tools');

  i.setAttribute('class', 'delete fa fa-trash-o');
  i2.setAttribute('class',...