JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contingut">
    <div id="top">
        <div id="menu">
            <ul>
                <li><a href="#quiensomos">QUIÉNES SOMOS</a>

                </li>
                <li><a href="#productos">PRODUCTOS</a>

                </li>
                <li><a href="#contacto">CONTACTO</a>

            </ul>
        </div>
        <div id="menuidiomes">
            <ul>
                <li><a href="index.html">ESP</a>

                </li>
                <li><a href="indexeng.html">ENG</a>

                </li>
                <li><a href="indexfra.html">FRA</a>

            </ul>
        </div>
        <div id="portada">
            <p class="MyLife">MY LIFE CONNECTION TECHNOLOGIES, S.L.</p>
            <p>&nbsp;</p>
            <p>SISTEMAS DE LOCALIZACIÓN Y MOVILIDAD</p>
            <p>&nbsp;</p>
            <p>C/Rusiñol, 93 - Despacho 12B
                <br />08397 - Pineda de Mar - Barcelona - España</div>
    </div>
    <div id="quiensomos">
        <div id="text1">
            <p class="titols">QUIÉNES SOMOS</p>
            <p>&nbsp;</p>
            <p>My Life Connection Technologies, S.L., ubicada en Pineda de Mar, Barcelona (España), tiene una base tecnológica dedicada al desarrollo y comercialización de productos y servicios asociados al geoposicionamiento y control de personas y bienes.</p>
            <p>&nbsp;</p>
            <p>In 2011 developed the first application; MyLifeLocation, covering the basics of the most needy people with psychological disabilities and kids; their location. My Life Connection Technologies, S.L. develops its products based on the needs of people and getting to them from their simplicity and price. All the technology used and developed is in the background to provide greater accessibility for people.</p>
        </div>
        <div id="text2">
            <p>Nuestros productos quedan abiertos a mejoras continuas propuestas por nuestros clientes a partir de sus experiencias y se actualizan de forma dinámica y gratuita...

CSS

@charset"UTF-8";

/* CSS Document */
 * {
    padding:0px;
    margin:0 auto;
}
body {
    background-image:url(../img/background1.jpg);
    background-repeat:repeat-x;
}
#contingut {
    position:relative;
    width:1024px;
    height:auto;
    font-family:'Abel', sans-serif;
}
#top {
    height:331px;
    position:relative;
    background-image:url(http://placekitten.com/200/300);
    background-repeat:no-repeat;
}
#menu {
    background-color:#BF2C39;
    font-size:18px;
    height:30px;
    width:350px;
    left:385px;
    position:absolute;
    float:left;
    padding-top:10px;
    padding-left:25px;
}
#menueng {
    background-color:#BF2C39;
    font-size:18px;
    height:30px;
    width:350px;
    left:395px;
    position:absolute;
    float:left;
    padding-top:10px;
    padding-left:30px;
}
#menuidiomes {
    background-color:#6271A0;
    font-size:18px;
    height:30px;
    width:160px;
    position:absolute;
    left:760px;
    float:left;
    padding-top:10px;
    padding-left:25px;
}
#menuidiomes li {
    margin-right:25px;
    float:left;
}
#menuidiomeseng li {
    margin-right:25px;
    float:left;
}
#menuidiomesfra li {
    margin-right:25px;
    float:left;
}
#menu li {
    margin-right:25px;
    float:left;
}
#menueng li {
    margin-right:35px;
    float:left;
}
#menufra li {
    margin-right:25px;
    float:left;
}
li {
    list-style-type:none;
    float:left;
}
#idiomes li {
    margin-right:10px;
}
#top a {
    color:white;
    text-decoration:none;
}
.titols {
    font-size:24px;
    padding-left:40px;
}
#quiensomos {
    height:438px;
    position:relative;
    width:1024px;
    text-align:justify;
}
#portada {
    left:470px;
    top:115px;
    width:400px;
    height:150px;
    position:absolute;
    font-size:18px;
    color:#51638E;
    text-align:center;
}
.MyLife {
    font-size:24px;
}
#text1 {
    padding-top:40px;
    font-size:18px;
    color:white;
    width:415px;
    position: absolute;
    left:45px;
   ...