JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="header">
      <div class="logo">
        <h1>SomeList</h1>
      </div>
    </div>
    <div id="content">
      <div class="ribbon">New List</div>
      <div class="est-total"> 
        <h2>Estimated Total: 
          <input id="total-items" type="text" name="total price" placeholder="$0" readonly>
        </h2>
      </div>
      <ul id="list-a"></ul>
      <ul id="list-b"></ul>
      <div class="alert"> <strong>ALERT - </strong>	Please enter a new List Item Below.</div>
      <input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
      <input id="qty" type="number" name="quantity" placeholder="Qty.">
      <input id="price" type="number" name="price" placeholder="Est. Price">
      <button id="add" type="button" value="Print List">ADD</button>
      <button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
      <button id="clear">Clear</button>
    </div>
    <div class="footer">
      <div class="disc">© Copyright 2016 SomeList.</div>
    </div>

CSS

@charset "UTF-8";
#content .est-total {
  *zoom: 1;
}
#content .est-total:before, #content .est-total:after {
  content: " ";
  display: table;
}
#content .est-total:after {
  clear: both;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Open Sans";
  box-sizing: border-box;
}

html, body {
  display: table;
  height: 100%;
  width: 100%;
}

a {
  text-decoration: none;
  color: white;
}

#header {
  text-align: center;
  width: 100%;
  height: 330px;
  padding: 0;
  background: #222;
  border-bottom: 10px solid #1480ff;
  margin: -15px auto 0;
}
#header .logo {
  margin-top: 15px;
}
#header .logo h1 {
  font-size: 70px;
  font-family: "Pacifico", cursive;
  letter-spacing: 1px;
  font-weight: 400;
  color: #20e010;
  display: inline-block;
}
#header .logo i {
  font-size: 50px;
  color: #20e010;
  padding: 15px;
  border: 5px solid #fff;
  border-radius: 45px;
}

#content {
  width: 100%;
  max-width: 650px;
  background-color: #fff;
  margin: -120px auto 50px;
  border: 10px solid #e2e2e2;
  padding: 20px;
  border-radius: 20px;
  position: relative;
}
#content .ribbon {
  width: 75px;
  height: 75px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 25px;
  text-transform: uppercase;
  text-align: center;
  background: #db0b0b;
  padding: 10px 0 0 5px;
  margin: -35px 0 0;
  display: inline-block;
  float: left;
  border-radius: 10px;
}
#content .est-total {
  text-align: right;
  padding: 0;
  margin-top: 0;
}
#content .est-total h2 {
  font-size: 15px;
  line-height: 30px;
  font-style: italic;
  font-weight: 400;
}
#content h1 {
  margin: -10px 0 20px;
}
#content h5 {
  font-size: 22px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #1480ff;
  padding: 5px 3px 0;
}
#content #list-a {
  width: 78%;
  list-style: none;
  margin: 0 10px 30px 0;
  padding: 10px;
  float: left;
}
#content #list-a li {
  height: 43px;
  padding: 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  text-transform: capitalize;
}
#content #list-b {
 ...

JavaScript

$(document).ready(function(){

	$('.alert').hide();

// Check to see if input field is empty THEN if not empty add items, qty and price to list
	$('#add').on('click', function() {
		if ( !$('#list').val() ) {
			$('.alert').show();
    	}
		else {
// Adds typed items, qty and price to the list
		// Adds Item and QTY to List
			var item = $('#list').val();
			var qty = $('#qty').val();
			$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
		// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
		// Adds Product to List
			var price = $('#price').val();
			var itemTotal = qty * price;
			$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
		// Resets input field to empty and focus
			$('#list').val('').focus();
			$('#qty, #price').val('');
			
			$('.alert').hide();
		}
	});

// Fires Add to List button when enter is clicked
	$('#list, #qty, #price').keyup(function(event){
    	if(event.keyCode === 13){
        	$('#add').click();
    	}
	});

// Calculates and automatically updates Estimated Total
	$('#add').click( function() {
		var sumAdd = 0;
		$('input.listPriceInput').each(function() {
			sumAdd = sumAdd + parseFloat($(this).val());
		});
		$('#total-items').val('$' + sumAdd);
	});

// Marks as done by adding class strike by clicking the check mark
	$('#list-a').on('click', '.done', function () {
    var listItem = $(this).closest('li'),
        index = listItem.index();
		listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
		.toggleClass('strike');
	});

//******//
// Deletes/fades out 'li' when X is clicked	+ Updates Estimated Total
//******//
	$('#list-a').on('click', '.delete', function () {
    var listItem = $(this).closest('li'),
        index = listItem.index(),
        currTotal =...