JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
  <title>2Home</title>
  <link rel="stylesheet" type="text/css" href="2simonestyle.css">
</head>
<body id="home">
<div id="bgimage">

  <div class="headerbox">
    <div class="logoleft"><img src="hh_logo 100x100.png"></div>
    <div class="title"><img src="hhtitle3.png"></div>
    <div class="logoright"><img src="pk_logo 100x100.png"></div>
  </div>
  <nav class="navibox">
    <ul/>
    <li><a href="index.html">Home</a></li>
    <li><a href="blank.html">Über mich</a></li>
    <li><a href="blank.html">Training</a></li>
    <li><a href="blank.html">Westernreiten</a></li>
    <li><a href="blank.html">Kontakt</a></li>
    <li><a href="blank.html">Seite6</a></li>
    <li><a href="blank.html">Seite7</a></li>
    </ul>
  </nav>
  <div class="maincontent">
    <div class="box1">
      <div><p style="font-weight: bold;">Herzlich Willkommen auf meiner Webseite!<br><br></p></div>
      <div>Hier finden Sie bald Informationen rund ums Westernreiten und harmonisches Pferdetraining.<br><br></div>
      <div>Als mobile Pferdetrainerin, Reitlehrerin und TGT®-Trainerin bin ich für Sie im gesamten Kreis Gütersloh und darüber hinaus (Bielefeld, Münster/Warendorf, Paderborn etc.) unterwegs.<br><br></div>

      <div>- Reitweisenübergreifend -</div>
      </div>

    <div class="box2">
      <div>Bis meine Webseite fertig ist, finden Sie meine Kontaktdaten direkt hier unten: <br><br>
      </div>
      <div><p style="font-weight: bold;">Simone Soria<br>
      Telefon: 0176/78312697<br>
      E-Mail: [email protected]</p></div>
    </div>
    <div class="box3"><img src="SimoneFoto.jpg"><br>Ich freue mich darauf Sie und Ihr Pferd kennenzulernen</div>




  </div>
</div>
  <address>Last updated by Angie<br>
    may 2017</address>
</div>
</div>
</div>
</body>
</html>

CSS

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #312716;
    background-color: #191918}
#bgimage {
  background-image: url(background_retouched_crop.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headerbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-radius: 13px 13px 13px 13px;

  margin-top: 10px;
  margin-bottom: 5px;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  max-width: 800px;
  background-image: url(trans_bg_px-weiss60.png);
}
.logoleft {
width: 100px;
height: 100px;

}
.title {


}
.logoright {
  width: 100px;
  height: 100px;

}
.navibox ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-image: url(trans_bg_px-weiss60.png);
  list-style: none;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  max-width: 800px;
  border-radius: 13px 13px 13px 13px;
  padding: 0;
}
.navibox a {
  color: gray;
  font-family: cursive;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1rem;
}
.navibox a:hover {
  background: peru;
  border-radius: 20px;
  color: white;
}

@media all and (max-width: 600px) {
  .navibox ul {
    /**
     * Full width navigation items
     */
    flex-flow: column wrap;
    padding: 0;
  }
}
.maincontent {
  display:flex;
  flex-flow: column;
  margin-top: 5px;
  width: 60%;
  min-height: 800px;
  margin-left: 20%;
  margin-right: 20%;
  max-width: 800px;
  border-radius: 13px 13px 13px 13px;
  background-image: url(trans_bg_px-weiss60.png);
}
.box1 {

  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
}
.box2 {

  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
}
.box3 {
  
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding:...