JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<div class="other">
  <div class="koo">
      <div class="moo">This is data</div>
      <div class="moo">Test data is fun</div>
      <div class="moo">Here we go, another line...</div>
      <div class="moo">I should go to bed</div>
      <div class="moo">Just one more line! :D :D :D :D</div>
    </div>
      <nav class="parent">•••
      <div class="wrapper">
        <section class="grid-test">
          <nav>Hello</nav>
          <nav>And</nav>
          <nav>good</nav>
          <nav>morning</nav>
          <nav>team</nav>
          <nav>#code4life</nav>
        </section>
      </div>
    </nav>
</div>

SCSS

body { background: #f7f7f7; font-family: sans-serif; line-height: 1.3; font-size: 12px; height: 70vh; }

 .moo:nth-child(2n) { background: #bfbfbf0f; }
 .moo:nth-child(2n+1) { background: #e4e4e4; }
 div .moo { margin: 2px;}
 
.other {
    height: 4.2rem;
    margin: 2rem 8rem;
    background: #dedede;
    border: 1px solid rgba(125, 125, 125, .3);
 }
 .koo {
    float: right;
    width: 100%;
    max-height: 4.1rem;
    overflow-x: hidden;
    overflow-y: auto;
 }
div .wrapper {
   height: auto;
   overflow-x: hidden;
   overflow-y: hidden;
	 position: absolute;
	 z-index: 10;
	 display: none;
}
.wrapper {
   height: 4rem;
	 position: relative;
   backroung: rgba(0,175,175, 0.1);  
}
section.grid-test {
    background: #c5cccc;
    text-align: center;
    border: 1px solid #afafaf;
    min-width: fit-content;
}
.item {
  width: 4rem;
}
 nav:hover > .wrapper {
	 display: block;
}

 nav {
   position: static;
   width: 4rem;
   margin-bottom: 2px;
   padding-left: 0.5rem;
}

 nav .wrapper {
	 cursor: auto;
}

 nav:nth-child(2n) { background: #bfbfbf0f; }
 nav:nth-child(2n+1) { background: #ced8d3; }
 
 nav.parent {
   right: 9.7rem;
   position: absolute;
   background: #b7b7b7;
   cursor: pointer;
   width: 1.2rem;
}