JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <button class="child">Test</button>
</div>


<h1>
• The green should turn red on direct click on itself
</h1>

<h1>
• The green should stay green on button click
</h1>

SCSS

.parent{
  width: 100px;
  height: 100px;
  background: green;
}
.parent:active{
  background: red;
}

.child:active{
  background: lightblue;
}

.parent:hover:focus-within {
  background: green;
}