JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-wrapper">
    <div id="main-wrapper">
        <div id="contenedor">
            <div id="cabecera">
                <div class="es" id="menu-principal">
                    <ul>
                        <li><a href="1.html">1</a>

                        </li>
                        <li><a href="2.html">2</a>

                        </li>
                        <li><a href="3.html">3</a>

                        </li>
                        <li><a href="4.html">4</a>

                        </li>
                        <li><a href="5.html">5</a>

                        </li>
                        <li><a href="6.html">6</a>

                        </li>
                        <li><a href="7.html">7</a>

                        </li>
                        <li><a href="8.html">8</a>

                        </li>
                        <li><a href="9.html">9</a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    background:url("imagenes/fondo.png") repeat-y scroll center top #FFFFFF
}
#content-wrapper {
    width:945px;
    margin-right:auto;
    margin-left:auto;
}
#main-wrapper {
    width:100%;
}
#contenedor {
    width: 945px;
    margin-right: auto;
    margin-left: auto;
}
#contenedor #cabecera {
    width: 945px;
}
#contenedor #cabecera #menu-superior {
    height: 19px;
    width: auto;
    font-size: 11px;
    font-style: normal;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    padding-left: 6px;
    padding-top: 3px;
    padding-bottom: 0px;
    text-transform: none;
    background-image: url(Imagenes/background-cabecera-menusuperior.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: left top;
    color: #666;
}
#contenedor #cabecera #menu-superior a {
    font-family: Verdana, Geneva, sans-serif;
    color: #999;
    text-decoration: none;
}
#contenedor #cabecera #cabecera-principal {
    height: auto;
    width: 945px;
    height: 76px;
    padding: 0px;
    width: 945px;
    background-image: url(Imagenes/background-cabecera-principal.png);
}
#contenedor #cabecera #cabecera-principal #logo {
    width: auto;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10px;
    cursor: auto;
    border: 0;
    text-decoration: none
}
#contenedor #cabecera #cabecera-principal #centro {
    height: 75px;
    width: 200px;
    float: left;
}
#contenedor #cabecera #cabecera-principal #zona {
    height: 75px;
    width: 339px;
    float: left;
}
#contenedor #cabecera #menu-principal {
    display: table;
    width: 945px;
    height: 29px;
}
#contenedor #cabecera #menu-principal ul {
    display: table-row;
    margin: 0;
    padding: 0;
    list-style: none;
}
#contenedor #cabecera #menu-principal ul li {
    display: table-cell;
    background-color: #C8E654
}
#contenedor #cabecera #menu-principal ul li a {
    display: block;
    padding:...