JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<div class="container">

  <div class="menu menu--first">
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
  </div>
  
  <div class="menu menu--second">
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
  </div>
  
</div>

SCSS

.container {
  
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: start;
  
  margin: 50px;
  border: 2px solid black;
  width: 300px;
  overflow: hidden;
  
}

.menu {
  
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  
  &--first {
    background-color: lime;
    transform: translate(-40%);
  }
  
  &--second {
    background-color: orange;
    transform: translate(-60%);
  }
  
}


.menu-item {
  height: 30px;
  border: 1px solid black;
}