JSFiddle - React, Tailwind, and code Playground

HTML

<!-- #PAGE -->
<div id="page1">
    <!-- #HEADER -->
    <div id="header1">
        <div class="content-wrapper">
            <div class="ft-div-left">
                <center>
                    <img src="FW_Logo_Website.png">
                </center>
            </div>
            <div class="ft-div-right">
                <center>
                    </br> <a href="logout.php" style="text-decoration:none;">
          <button class="button-logout" name="Ausloggen">Logout</button>
          </a>

                </center>
            </div>
            <div class="ft-div-middle"></div>
        </div>
    </div>
    <!-- HEADER ENDE -->
    <!-- #CONTENT -->
    <div id="content">
        <div class="wrapper">
            <div class="left_box">
                <center>
                    <img alt="" src="images/camera.png" width="100" height="100" />
                     <h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>

                    <p class="explanation">Alle unretuschierten Fotos.</p>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <img alt="" src="images/megabyte.png" width="20" height="20" />
                                </td>
                                <td>24.5 MB</td>
                            </tr>
                            <tr>
                                <td>
                                    <img alt="" src="images/image.png" width="20" height="20" />
                                </td>
                                <td>758</td>
                            </tr>
                            <tr>
                                <td>
                                    <img alt="" src="images/resolution.png" width="20" height="20" />
                                </td>
                                <td>3459 x 3294</td>
                            </tr>
                      ...

CSS

@charset"UTF-8";

/* CSS Document */
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic, 400italic, 400, 700, 300);
 body {
    font-family:'Open Sans', sans-serif;
    background-color: #FFF;
    position: center;
    margin: 0;
    padding: 0;
    /*height: 350px; */
}
#page1 {
    /*font-family: 'Open Sans', sans-serif;*/
    background-color: #FFF;
    /*position: center;*/
    top: 100px;
    overflow: scroll;
    bottom: 0px;
    left: 0px;
    right: 0;
}
#header1 {
    /*padding: 5em; /* 5em*/
    height: 100px;
    background-color: #FFF;
    background: url(images/myLogo.png) no-repeat scroll transparent;
    background-position: center;
    /*border-bottom: 3px solid #000;*/
    -webkit-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
    -moz-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
    box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
}
#content {
    padding: 10px;
    padding-bottom: 7em;
    /* Höhe des Footers */
}
#footer1 {
    position: absolute;
    bottom: 0;
    background: #333;
    height: 7em;
    /* Höhe des Footers*/
    width: 100%;
    -webkit-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
    -moz-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
    box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
}
/***** 2 INHALTSBOXEN *****/
 .wrapper {
    width: 630px;
    margin: 0 auto;
}
.left_box {
    float: left;
    padding: 10px;
    width: 290px;
    height: 350px;
    text-align: center;
    border: 2px solid white;
    margin-top: 10px;
}
.right_box {
    float: right;
    padding: 10px;
    width: 290px;
    height: 100%;
    text-align: center;
    border: 2px solid white;
    margin-top: 10px;
}
.clearer {
    clear: both;
    padding: 1px;
    width: 100%;
    height: 0.5px;
}
/***** ÜBERSCHRIFTEN *****/
 .headline {
    text-transform: uppercase;
    color: #000;
    font-size: 125%;
}
/***** ERKLÄRUNGSTEXT *****/
 .explanation {
    text-transform: none;
    color: #000;
   ...