JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Actual Material UI behavior
</h1>

<div class="container actual">
  <div class="paper">
    <span>1</span>
  </div>
  <div class="paper">
    <span>2</span></div>
  <div class="paper">
    <span>3</span>
  </div>
</div>

<h1>
  Expected Material UI behavior
</h1>

<div class="container expected">
  <div class="paper">
    <span>1</span>
  </div>
  <div class="paper">
    <span>2</span></div>
  <div class="paper">
    <span>3</span>
  </div>
</div>

SCSS

h1 {
  margin: 20px;
  font-size: 36px;
}

span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
}

.container {
  display: flex;
  margin: 40px;
  
  & > * {
    margin-left: 10px;
    flex: 1;
    
    &:first-child {
      margin-left: 0;
    }
  }
}

.paper {
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  
  .actual & {
    box-shadow: 0 0 0 20px red;
  }
  
  .expected & {
    position: relative;
    
    &::before {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 0 20px red;
      border-radius: 8px;
      z-index: -1;
    }
  }
}