JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="maincontainer">
            <!-- LEFT MENU START -->
            <div id="menu">
                <div class="navbar">
                    <ul>
                        <li>Reviews</li>
                        <li>Galeria</li>
                        <li>Contacto</li>
                    </ul>
                </div>
            </div>
            <!-- WRAPPER START -->
            <div id="wrapper">
                <!-- LEFT MENU START -->
                <div id="wrapperleftmenu">
                    <div id="reviewpreview">
                        <div id="rpcontainer">
                            <div id="wlmtext">
                                <h3>Rust Review</h3>
                                <br>
                                <p>En rust, lo principal sera sobrevivir...</p>
                            </div>
                            <div id="wlmimage">
                                <a href="a">_</a>
                            </div>
                        </div>
                    </div>
                    <div id="news">
                        <h3>PES 2016 now available</h3>
                        <p>The new soccer sim is out and we got it!</p>
                        <img src="https://steamcdn-a.akamaihd.net/steam/apps/252490/header.jpg">
                    </div>
                    <div id="screenshot">
                        <h3>The screenshot of the week!</h3>
                        <p>Pertains to Rust Gameplay and its awesome!</p>
                        <img src="https://steamcdn-a.akamaihd.net/steam/apps/252490/header.jpg">
                    </div>
                </div>
                <!-- RIGHT  MENU START -->
                <div id="wrapperrightmenu">
                    <div id="contact">
                        <h2>We are easy to reach!</h2>
                        <p>Just send us an email or reach us at social...

CSS

* {
     max-width: 100%;
     color: white;
     margin: auto;
 }
 html,
 body {
     width: 100%;
     margin: 0 auto;
     height: 100%;
 }
 /*  MAIN STYLE FOR EACH CONTAINER */

 #maincontainer {
     width: 100%;
     height: 100%;
     background-image: url(images/main.jpg);
     background-repeat: no-repeat;
     background-position: top;
 }
 #menu {
     width: 19.8%;
     height: 100%;
     background-image: url(images/bd.png);
     float: left;
     opacity: 0.9;
 }
 #wrapper {
     width: 80%;
     height: 90%;
     background-image: url(images/bd.png);
     opacity: 0.9;
     float: left;
     border-left: white solid 1px;
 }
 #copyright {
     width: 80.2%;
     height: 10%;
     background-image: url(images/gray.png);
     float: left;
     opacity: 0.7;
     text-align: center;
     display: table;
 }
 #copyright p {
     color: black;
     display: table-cell;
     vertical-align: middle;
 }
 /*  NAVBAR LEFT SIDE STYLE */

 .navbar {
     margin: 50% auto;
     width: 50%;
     height: 50%;
 }
 .navbar ul {
     width: 50%;
     height: 50%;
     margin: 50% auto;
 }
 .navbar ul li {
     width: 50%;
     list-style-type: none;
     color: white;
     display: inline-block;
     margin-top: 15px;
 }
 /*  WRAPPER's LEFT SIDE STYLE */
 /*  THE REVIEWS SHIT */

 #wrapperleftmenu {
     float: left;
     width: 60%;
     height: 100%;
     margin: 2% auto;
     border-right: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  THE REVIEWS SHIT  */

 #reviewpreview {
     width: 60%;
     height: 33%;
     margin: 2% auto;
     border: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  THE REVIEWS PICTURE  */

 #rpcontainer {
     width: 95%;
     height: 90%;
     margin: 2% auto;
     border: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  WRAPPER LEFT MENU TEXT - TEXT FOR REVIEW  */

 #wlmtext {
     width: 23%;
     height: 60%;
     margin: 10% 3%;
     border: white solid 1px;
     float: left;
     display: inherit;
 }
 #wlmimage {
     width: 65%;
    ...