JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<title>My Favorite Grimm's Fairy Tales</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alex-brush:n4:default.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8">
</head>
<body>
<header>
  <h1>My Favorite Grimm's Fairy Tales</h1>
  <p>&nbsp;</p>
</header>
<div class="nav">
  <ul >
    <li ><a href="index.html">HOME</a></li>
    <li><a href="thetravelingmusicians.html">THE TRAVELING MUSICIANS</a></li>
    <li><a href="thefrogprince.html">THE FROG PRINCE</a></li>
    <li><a href="rapunzel.html">RAPUNZEL</a></li>
    <li><a href="hanzelandgretel.html">HANZEL & GRETEL</a></li>
    <li><a href="orderform.html">BUY BOOKS</a></li>
  </ul>
</div>
<aside class="asidesection">
  <h1>Buy Books</h1>
  <h4>(Hover over the box above the order form to view pricing)</h4>
</aside>
<div class="box5"><p>This fairytales website offers you the opportunity to purchase your very own copy of these tales.  The prices are as follows: Hardcover books are $12 each, and Softcover books are $10 each.  If your order total exceeds $75, we will give you a 10% discount off your order total.</p>
</div>
<div id="fairytaleCastle-background">
    <div id="form-wrapper">
    <form action="" method="post" name="math_form">
      <h1>
        <center>
          Order Form
        </center>
      </h1>
      <p> Please enter the number of hardcover and/or softcover copies of the "My Favorite Grimm's Fairy Tales" that you wish to purchase:</p>
      <fieldset>
        <legend>Entry of Book Order</legend>
        <ul>
          <li>
            <label for="hardcover-books">Harcover Copies</label>
            <input name="num1"...