JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<div class="grou-wrapper">
<div class="group">
<div class="group-head">group head
</div>
<div class="add-item">
add item
</div>
<div class="foo">
here this one
</div>
<div class="foo">
item 2
</div>
<div class="foo">
item 3
</div>
</div>
<div class="group">
<div class="group-head">group head
</div>
<div class="add-item">
add item
</div>
<div class="foo">
here this one
</div>
<div class="foo">
item 2
</div>
<div class="foo">
item 3
</div>
</div>
</div>

CSS

.group > .foo  {
    background:yellow;
}
.group > .foo ~ .foo  {
    background:blue;
}