JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ContenedorCabecera">
<a href="#" class="Logo">LogoUEPcar</a>
<div class="ContenedorNavegacion">
<div class="ContenedorBotones">
<div class="icon-set icon-set-center">
<div class="icon BotonHome"></div>
<div class="icon BotonADV"></div>
</div>
</div>
</div>
<div class="ContenedorIdiomas">
<ul class="DropdownIdiomas Fuente">
<li class="active">Idioma actual</li>
<li class="first"><div class="Banderas BanderaEsp"></div><a href="#">Español</a></li>
<li><div class="Banderas BanderaMall"></div><a href="#">Mallorquí</a></li>
<li class="last"><div class="Banderas BanderaEng"></div><a href="#">English</a></li>
</ul>
</div>
</div>
CSS
html{
overflow-y: scroll
}
body{
background-color: #cb4040;/*12345a*/
margin:0;
padding: 0;
border:0;
vertical-align: baseline;
width: 100%;
height:100%;
}
.Fuente{
font-family: 'Amatic SC', cursive;
font-size: 20px;
color:black;
font-weight: bold;
}
.Centrar{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ContenedorCabecera{
background-color: #123456;
position: relative; /*Static ya que es la primera y su posición es arriba*/
height: 150px; /*???????????????????*/
}
a.Logo{
height: 213px;
width: 320px;
position: absolute;/*PORQUE?????????*/
top:13px;
left: 1%;
background:transparent url(../Imagenes/UEPcarLogo.png) no-repeat 0 0;
background-size: contain;
text-indent: -9999px;
font-size: 0;
text-decoration: none;
}
.ContenedorNavegacion{
position: relative;
}
.ContenedorBotones{
position: relative;
height: 60px;
}
.icon-set.icon-set-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
top:100%;
}
.icon-set .icon {
width: 100px;
height: 60px;
display: inline-block;
cursor: pointer;
}
.BotonHome{
background:transparent url(../Imagenes/Home.png) no-repeat 0 0;
}
.BotonHome:hover {
background:transparent url(../Imagenes/HomeHover.png) no-repeat 0 0;
}
.BotonADV {
background:transparent url(../Imagenes/ADV.png) no-repeat 0 0;
}
.BotonADV:hover {
background:transparent url(../Imagenes/ADVHover.png) no-repeat 0 0;
}
.ContenedorCuerpo{
/*background-color: #321654;*/
position: relative;
height: 400px;
}
.XXX .PP {
width: 150px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
height: 30px;
display: inline-block;
cursor: pointer;
}
.XXX .SS {
width: 50px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
height: 30px;
display: inline-block;
cursor: pointer;
margin-left: 50px;
}
.SimuladorPartida{
background:transparent...