JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="menus">
        <div id="logo">	<a href="looky.html"><img src="imags/lookyround.png" /></a>

        </div>
        <div id="sidemenu">
            <ul>
                <li id="a">Inicio</li>
                <li>Fotos</li>
                <li>Quien Soy</li>
                <li>Citas</li>
            </ul>
        </div>
    </div>
    <div id="anterior">	<a href=""><img src="imags/left.png" /></a>

    </div>
    <div id="fotos">
        <div class="foto"><a href="foto1.html"><img class="fotosm" src="http://placekitten.com/200/300" /></a>

        </div>
        <div class="foto"><a href="foto2.html"><img class="fotosm" src="http://placekitten.com/200/300" /></a>

        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
        <div class="foto">
            <img class="fotosm" src="http://placekitten.com/200/300" />
        </div>
    </div>
</div>

CSS

#container {
    margin:0px 0px 0px 0px;
}
#menus {
    width: 20%;
    display:inline-block;
    clear:right;
    float:left;
    margin-left:1.5%
}
#logo {
    width:85%;
    margin-top:8%;
    margin-left:2.5%;
    margin-bottom:5%;
}
#logo > a > img {
    width:40%;
    margin-left:30%;
    margin-left:30%;
}
#logo > a > img:hover {
    opacity:0.6;
    -webkit-transition:opacity 0.25s;
}
#sidemenu {
    width:80%;
}
#a {
    border-top:1px solid black;
}
#sidemenu > ul {
    list-style-type:none;
    list-style-position:inside;
    padding-left:0px;
    margin-left: 3.5%;
    text-align:center;
}
#sidemenu > ul > li {
    font-family:Raleway;
    font-size: 20px;
    font-weight: light;
    border-bottom: 1px solid black;
    line-height:150%;
}
#anterior {
    display:inline;
    width:10%;
    overflow:hidden;
    margin-top:5%;
}
#anterior img {
    width:4%;
    margin-top:24%;
}
.fotosm {
    width:100%;
    margin:0px;
}
.fotosm:hover {
    opacity:0.6;
    -webkit-transition:opacity 0.5s;
}
#fotos {
    width:75%;
    padding-left:8%;
    height:80%;
    overflow: hidden;
}
#footer {
    width:70%;
    margin-top:10px;
    margin-right:15%;
    margin-left:15%;
}
.foto {
    width:20%;
    height:20%;
    padding:0px;
    float:left;
    display:inline;
    margin:1.25%;
    padding:0.5%;
}