Fidget Spinner

<div class="top"></div>
<div class="middle-left"></div>
<div class="middle"></div>
<div class="middle-right"></div>
<div class="bottom"></div>

<style>
  body {
    background: #09042a;
    display: grid;
    justify-content: center;
    align-content: center;
  }

  div {
    height: 60px;
    width: 60px;
    border-radius: 50%;
  }

  .top,
  .bottom {
    grid-column-start: 2;
    background: #f5bb9c;
    box-shadow: 0 0 0 10px #09042a;
    translate: 0 7px;
  }

  .middle,
  .middle-right,
  .middle-left {
    grid-row-start: 2;
  }

  .middle-right,
  .middle-left {
    background: #09042a;
    box-shadow: 0 0 0 10px #e78481;
  }
  .middle {
    background: #e78481;
    scale: 1.4;
    z-index: -1;
  }
  .bottom {
    translate: 0 -7px;
  }
</style>