I’m having some difficult recreating using Tailwind some CSS I found online.

The full implementation is demoed in this code snippet:
https://codepen.io/kkellydesign/pen/WNKBdqL

HTML:

<div>
  <div>
    <div></div>  
  </div>
</div>

CSS:

div{max-width: 300px;max-height: 200px; background: red; padding: 40px;}
div div {background: purple}
div div div { background: pink}

div:not(:has(div:hover)):hover {
outline: 5px solid black;
}

The specific part I’m having trouble recreating using Tailwind is

div:not(:has(div:hover)):hover

Any help is greatly appreciated!