JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red" class="green"  style="position:absolute;top:15px;left:15px;">1</div>

<div class="green">2</div>

<div>3</div>

<div><div class="green">4</div></div>


<!-- HOMEWORK

Make the red and green div be over each other with the red div being in front.

Hint: look into position and z-index.

-->

CSS

/* Use # for IDS. IDS must be unique */
#red {
   background-color: #FF0000; /* Hex numbers use 16 digits 0 1 2 3 4 5 6 7 8 9 A B C D E F */
}

/* Use . for classes. Classes can be repeated many times */
.green {
   background-color: #00FF00;
}

/* Use element tag name to represent all divs on page */
div {
    background-color: #0000FF;
    font-family: arial;
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 15px;
    color: #FFFFFF;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
}

/*more specific */

div div.green, div > div.green{
    background-color: #CCCCCC;   
}