JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="parent">

  <div class="child active"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>
<div class="parent">

  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>
<div class="parent">

  <div class="child active"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>
<div class="parent">

  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>

CSS

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.parent, .child {
  border: 1px solid black;
  padding: 20px;
  margin: 20px;
}

.parent {
  display: flex;
}

.child.active {
  background: red;
}

.parent:has(> .active) {
  background: red;
}