JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://the-clann.com/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery.min.js" type="text/javascript">
</script>

<body>
  <div id="bannerWrapper" role="presentation">
    <div id="banner" role="banner">
    <img src="images/banner.png" title="Clann" />
    </div>
  </div>
  <div id="contentWrapper" role="presentation">
    <div id="sideBar" role="presentation">
      <div id="flower" role="presentation">
      <img src="images/flower.png" title="Flower" />
      </div>
      <div id="navigation" role="complementary">
Please <a href="/login.php">login</a> or <a href="/register.php">register!</a>
</div>
     </div>
    <div id="mainContent" role="presentation">
      <div id="content" role="presentation">
        <div id="navBar" role="presentation">
          <table width="100%" style="margin: 0 auto;">
            <tr>
              <td class="navBarLeft">
              </td>
              <td class="navBarMiddle">
                <div class="navigation" role="navigation">
                  <a href="">den</a> &bull;
                  <a href="">swamp</a> &bull;
                  <a href="">forest</a> &bull;
                  <a href="">watering hole</a> &bull;
                  <a href="">help</a>
                </div>
              </td>
              <td class="navBarRight">
              </td>
            </tr>
          </table>
          <br />
          <div role="main"><h1>Clann</h1>
<p>Welcome to Clan...</p>
            </div></div></div></div></div>
    
<div id ="footer" role="complementary">
<a href=""><font size="1">Terms of Service</font></a> •
<a href=""><font size="1">Rules</font></a> •
<a href=""><font size="1">Mod Box</font></a> •
<a href=""><font size="1">Credits</font></a> •
<a href=""><font size="1">Staff</font></a> •
<a href=""><font size="1">Contact</font></a>
    
<!--<?php

// Page load time.
$end_time = microtime(TRUE);
$total_time = number_format(($end_time -...

CSS

html, body {
        margin: 0;
        padding: 0;
        background-color: #c0ca91;
        color: #504233;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url(images/background.png);
        background-repeat: repeat-x;
  }
  #bannerWrapper {
        width: 1080px;
        margin: 5px auto;
        margin-top: 50px;
        padding: auto;
        overflow: auto;
  }
  #banner {
        float: right;
        border: 2px solid #403023;
  }
  #contentWrapper {
        width: 1080px;
        margin: 5px auto 30px;
        padding: auto;
        overflow: auto;
  }
  #sideBar {
        position: absolute;
        float:left;
        background-color: #c9bc8f;
        border-radius: 10px;
        width: 200px;
        border: 2px solid #827156;
        min-height: 400px;
  }
  #navigation {
        padding: 20px;
        padding-top: 35px;
  }
  #flower {
        position: absolute;
        z-index: 100;
        top: -50px;
        left: -50px;
  }
  #mainContent {
        float: right;
        width: 850px;
        border: 2px solid #938467;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 0;
        margin: 0;
        background-color: #dcd7a6;
        min-height: 500px;
  }
  #content {
        padding: 10px;
        margin: 0;
  }
  #navBar {
        height: 36px;
        width: 100%;
        margin: 0 aut0;
        padding: 0;
  }
  #navBar a {
        color: #504233;
        text-decoration: none;
        padding:10px;
        font-family: "Times New Roman", Times, serif;
        text-transform: capitalize;
        font-size: 14pt;
  }
  #navBar a:hover {
        color: #7a6950;
        text-decoration: none;
  }
  .navBarLeft {
        margin: 0;
        padding: 0;
        float:left;
        height: 36px;
        width: 28px;
        background-image: url(images/left.png);
        background-repeat: no-repeat;
  }
  .navBarRight {
        margin: 0;
        padding: 0;
       ...