JSFiddle - React, Tailwind, and code Playground

by viktorb

HTML

<div class="drill">
  <div tabindex="1">Button 1</div>
  <div tabindex="2">
    <select>
      <option>
        stuff
      </option>
    </select>
  </div>
  <div tabindex="3"><input type="checkbox" />Check</div>
  <div tabindex="4">
    <input type="text" value="Oook!" />
  </div>
</div>

SCSS

.drill {
  &:focus-within {
    & > div {
      filter: blur(.5px); // Blur all other items when one item has focus
    }
  }
  & > div {
    display: block;
    position: relative;
    display: inline-block;
    background: transparent;
    box-sizing: border-box;
    transform-origin: center center;
    &, & > * {
      outline: none;
    }  
    
    &:focus {
      transform: scale(1.2);
      transition: all 1.26s ease-in-out;
      transition-timing-function: cubic-bezier(0.01, 1.92, 0.88, 0.26);
      filter: none;
      z-index: 999999999999;
    }
  }
}


// JUNK BELOW
.drill {
  & > div:first-child {
    width: 80px;
    height: 32px;
    border-radius: 3px;
    color: white;
    background: orange;
    text-align: center;
  }
}