JSFiddle - React, Tailwind, and code Playground

HTML

<section id="s1">
<div id="div1">abc</div>
<div id="div2">
    <span>first span</span>
    <span class="sp">second span</span>
</div>
</section>

<section>
    <div>test</div>
</section>

CSS

section {
background-color: brown;
width: 400px;
height: 200px;
}

#s1 {
position: relative; 
background-color: rgba(0,255,0,0.5); 
border: 1px solid #000; width: 50%;
}

#div1 {
background-color: #0f0; 
position: relative;
}

#div2 {
background-color: #0ff; 
width: 200px; 
color: red;
}

#div2 .sp {
color: white;
text-decoration:line-through;
}

section :only-child {
color: yellow;

}