JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<p id="parrafo">lorem ipsum</p> <!-- JS solo afecta a este parrafo -->
<p id="parrafo">dolor amet</p>
<p id="p3" class="parrafo">párrafo 3</p>
<p id="p4" class="parrafo negritas">párrafo 4</p>
<span class="negritas">negrita</span>

<!--***-->
<div id="wrap">
    <p class="capas" id="tierra">tierra</p>
    <p class="capas" id="cielo">cielo</p>
    <p class="capas" id="universo">universo</p>
    <p class="capas" id="aves">v v v v v v v v v v v v v v v v v v v v v v v v v v v v v vv v v v</p>
</div>

CSS

#parrafo{
    color:cornflowerBlue;
}
.parrafo{
    color:crimson;
}
.negritas{
    font-weight:bold;
}

/***/
#wrap{ 
    width:300px;
    height:300px;
    background:beige;
    overflow:hidden;
    position:relative;
}
.capas{ 
    padding:10px;
    width:180px;
    height:180px;
    position: absolute;
}
#tierra{
    background:peru;
    top: 0; 
    left:0;
    z-index: 0;
}
#cielo{
    background:skyBlue;
    top: 33px; 
    left:33px;
    z-index: 1;
}
#universo{
    background:black; color:whitesmoke;
    top: 100px; 
    left:100px;
    z-index: 3;
}
#aves{
    font-weight:bold;
    color:white;
    outline: 2px dotted yellow;
    font-size:2em;
    top: 66px; 
    left:66px;
    z-index: 2;
}

JavaScript

window.onload = function(){
    //con id duplicada: solo afecta al primer parrafo
    document.getElementById("parrafo").innerHTML = "texto nuevo";
    //con id unica:
    document.getElementById("p3").innerHTML = "el tercero"; 
    document.getElementById("p4").innerHTML = "el cuarto";
}