JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div class="boxes boxes-1">
  <div class="box">
    <div class="inner"></div>
  </div>
</div>

<div class="boxes boxes-2">
  <div class="box">
    <div class="inner"></div>
  </div>
</div>

<div class="container container-1">
  <div class="grid"></div>
</div>
<div class="container container-2">
  <div class="grid"></div>
</div>

SCSS

:root {
  --border-width: 3px;
  --box-color: transparent; /** useful for debugging */
}

.container-1 { --grid-color: blue; }
.container-2 { --grid-color: red; }

.boxes, .container {
  position: absolute;
  width: 100vw;
  height: 95vh;
  pointer-events: none;
}

/** boxes always on top **/
.boxes {  z-index: 10; }

/** containers always on bottom */
.container { z-index: 0; }

.container-1:hover,
.boxes-1:hover ~ .container-1 {
  z-index: 5;
}

.container-2:hover,
.boxes-2:hover ~ .container-2 {
  z-index: 5;
}

/** .box and .grid are analogous */
.box, .grid {
  box-sizing: border-box;
  position: relative;
  width: 300px;
  height: 100px;
}

.box, .inner {
  &::before, &::after {
    content: '';
    pointer-events: auto;
    position: absolute;
    background-color: var(--box-color);
    z-index: 1;
  }
}

.grid {
  pointer-events: auto;
  border: var(--border-width) solid var(--grid-color);
  
  &:hover {
    background-color: var(--grid-color);
  }
}

.box {
  &:hover {
    /** for debugging only */
    background-color: var(--box-color);
  }
  
  /** top and bottom border overlays */
  &::before, &::after {
    height: var(--border-width);
    left: 0;
    right: 0;
  }
  &::before {  top: 0; }
  &::after { bottom: 0; }
  
  /** left and right border overlays */
  .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    &::before, &::after {
      width: var(--border-width);
      top: 0;
      bottom: 0;
    }
    &::before { left: 0; }
    &::after { right: 0;  }
  }
}

/** Javascript is used to create many boxes - this is here for simplicity */
.boxes-1 .box,
.container-1 .grid {
  margin-top: 20px;
}
.boxes-2 .box,
.container-2 .grid {
  margin-left: 30px;
}