JSFiddle - React, Tailwind, and code Playground

HTML

<directive-one>
  <div class="one active">
    First block
  </div>
</directive-one>
<directive-two>
  <div class="two">
    Second block
  </div>
</directive-two>

CSS

div {
position: relative;
height: 100px;
width: 300px;
}
.one {
	background: red;
}
.two {
	background: blue;
}

.one.active ~ .two {
  background: green;
}
}