JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div id="container1" class="container">
  <div class="long-list">
    Some very long overflowing list.  
  </div>
  
  <div class="cursor-controls">
    <div class="cursor-container cursor-left">
      <div class="cursor-arrow">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.78101 3.80498C9.16486 3.40789 9.79794 3.39716 10.195 3.78101L17.695 11.031C17.8899 11.2194 18 11.4789 18 11.75C18 12.0211 17.8899 12.2806 17.695 12.469L10.195 19.719C9.79794 20.1028 9.16486 20.0921 8.78101 19.695C8.39716 19.2979 8.40789 18.6649 8.80498 18.281L15.5612 11.75L8.80498 5.21899C8.40789 4.83514 8.39716 4.20207 8.78101 3.80498Z" fill="white"></path></svg>
      </div>
    </div>
    <div class="cursor-container cursor-right">
      <div class="cursor-arrow">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.78101 3.80498C9.16486 3.40789 9.79794 3.39716 10.195 3.78101L17.695 11.031C17.8899 11.2194 18 11.4789 18 11.75C18 12.0211 17.8899 12.2806 17.695 12.469L10.195 19.719C9.79794 20.1028 9.16486 20.0921 8.78101 19.695C8.39716 19.2979 8.40789 18.6649 8.80498 18.281L15.5612 11.75L8.80498 5.21899C8.40789 4.83514 8.39716 4.20207 8.78101 3.80498Z" fill="white"></path></svg>
      </div>
    </div>
  </div>
</div>

<div id="container2" class="container">
  <div class="long-list">
    Another long list but different height.
  </div>
  
  <div class="cursor-controls">
    <div class="cursor-container cursor-left">
      <div class="cursor-arrow">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.78101 3.80498C9.16486 3.40789 9.79794 3.39716 10.195 3.78101L17.695...

SCSS

.container {
  position: relative;
  margin-bottom: 1rem;
  
  &:hover {
    .cursor-controls {
      visibility: visible;
      opacity: 1;
    }
  }
}

.long-list {
  background: #330000;
  color: #fff;
  width: 100rem;
  height: 5rem;
  padding: 1rem;
}

.cursor-controls {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: none;
  opacity: 0;
  transition: all 0.2s ease-out;
  
  .cursor-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: rgba(128, 128, 128, 0.5);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      background: rgba(128, 128, 128, 0.5);
      width: 2rem;
    }
    
    &.cursor-left {
      left: 0;
      
      &::before {
        right: 100%;
      }
      
      svg {
        transform: rotate(180deg);
      }
    }
    &.cursor-right {
      right: 0;
      
      &::before {
        left: 100%;
      }
    }
  }
  
  .cursor-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}



/* Helper functions to show differences */
#container2 {
  .long-list {
    height: 8rem;
    transform: translateX(-20rem);
  }
}

#container3 {
  .long-list {
    height: 6rem;
    transform: translateX(-52%);
  }
}