JSFiddle - React, Tailwind, and code Playground

HTML

<body id="startseite">
  <div id="wrapper">
    <div id="logo">
      <p>{logo}</p>
 	  </div>
    
    <div id="topmenu">
      <ul>
        <li><a href="index.html">Startseite</a></li>
        <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
	  </ul>
    </div>
	
    <table id="maintable">
      <td id="leftmenutd">
        <div id="leftmenu">
          <p>{leftmenu}</p>
	        <p><span style="color: blue";>Grunglagen</span></p>
	        <p class="infobox">Dieser Text ist eine Infobox N1</p><br/>
	        <p class="infobox">Eine Infobox N2</p><br/>
	        <p class="infobox">Und noch eine Infobox</p>
	        <ul>
            <li id="navi01"><a href="index.html">Startseite</a></li>
            <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
          </ul>
        </div>
      </td>
      
      <td id="texttd">
      <div id="textbereich">
        <p>{textbereich}</p>
      	<h2>Startseite</h2>
        <a href="http://ya.ru" title="little-boxes.de - mit Infos zum Buch">die Website zum Buch</a>
        <p>Webseiten bestehen aus <strong>rechteckigen Kästchen</strong><br><br>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
           nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
           erat, sed diam voluptua. At vero eos et accusam et justo duo
           dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
           sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
           consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
           ut labore et dolore magna aliquyam erat, sed diam voluptua. At
           vero eos et accusam et justo duo dolores et ea rebum. Stet clita
           kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
           nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
           erat, sed...

CSS

/* Stylesheet für die Kuchensuppeseite */

/* ------------------Allgemeine Styles-----------------------------*/
* {
    margin: 0;
    padding: 0;
}

/* erzwingt Scrollbar im Firefox */
/*html { 
  height: 101%;


}

/* Gestalte das HTML-Element mit dem Namen body */
body {
  background-color: #bcffbc; /* Hintergrundfarbe */
  color: black; /* Schriftfarbe */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small; /* Schriftgröße */
}

/* Gestalte die Grafik mit id="logo" */
#logo {
  background: white url(http://www.superkipje.com/images/97502810430925910762.png) no-repeat left top;/*center;*/
  background-size: 100% 100%;
  height: 200px;
  /*alt="Little Boxes" */
  color: black;
}

#logo p{
  padding: 10px;
  color: black;
}

/* Gestalte das div mit id="wrapper" */
#wrapper {
  background-color: #ffffd0;
  color: black;
  /*width: 98%; /* Breite des Inhaltsbereichs */
  margin: 10px;
}

/* ----------------------------------------------------------------*/
#topmenu{
  padding: 0px 10px 0 0px;
  color: black;
  background-color: #f3c600; /* Gelb-Orange */
  background-image: url(http://cdn.imghack.se/images/4e9f7565b962a13c5dbcebd11c92ffc6.png);
  background-size: 100% 100%;
  border: 1px solid #8c8c8c;
  height: 40px;
  text-align: right; /* rechtsbündig */
}
  #topmenu ul { }
  #topmenu li {
    vertical-align: bottom;
    display: inline; /* li nebeneinander anzeigen */
	line-height: 56px;
    list-style-type: none; /* ohne Aufzählungspunkte */
  }
  
  #topmenu a{
    padding: 4px 8px 4px 8px;
    border-bottom-color: white;
    border: 1px solid #8c8c8c;
    color: black;
    background-color: #ffe080;
  }

  #topmenu a:hover,
  #topmenu a:focus {
    background-color: #d90000;
    color: black;
    background-color: white;
    border-bottom-color: white; 
  }
  #topmenu a:active {
    color: black;
    background-color: white;
    border-bottom-color: white;
  }

/*...