JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="slidemenu">
<div class="slidemenu__inner">
    <div class="slidemenu__inner__item">Testing</div>
    <div class="slidemenu__inner__item">Testing</div>
    <div class="slidemenu__inner__item">Testing</div>
    <div class="slidemenu__inner__item">Testing</div>
     <div class="slidemenu__inner__item">Testing</div>
      <div class="slidemenu__inner__item">Testing</div>
       <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
        
    <div class="slidemenu__inner__item">Testing</div>
    <div class="slidemenu__inner__item">Testing</div>
    <div class="slidemenu__inner__item">Testing</div>
     <div class="slidemenu__inner__item">Testing</div>
      <div class="slidemenu__inner__item">Testing</div>
       <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
        <div class="slidemenu__inner__item">Testing</div>
</div>

</div>

SCSS

$background: #e7e7e7;
$backgroundDark: darken($background, 40%);
$backgroundFull: rgba($background, 1);
$backgroundFade: rgba($background, 0);
.slidemenu {
  position: relative;
  background: $background;
  max-width: 100%;
  &__inner {
    padding: 1rem;
    overflow-x:auto;
    white-space: nowrap;
    &__item {
      display: inline-block;
      padding: 5px;
      margin-right: 10px;
    }
  }

  &:before, 
  &:after {
    
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background: orange;
    background: -moz-linear-gradient(left, $backgroundFull 0%, $backgroundFade 100%);
    background: -webkit-linear-gradient(left, $backgroundFull 0%, $backgroundFade 100%);
    background: linear-gradient(to right, $backgroundFull 0%, $backgroundFade 100%);
  }
  &:after {
    left: auto;
    right: 0;
    background: -moz-linear-gradient(left, rgba(231,231,231,0) 0%, rgba(231,231,231,1) 100%); 
    background: -webkit-linear-gradient(left, rgba(231,231,231,0) 0%,rgba(231,231,231,1) 100%);
    background: linear-gradient(to right, rgba(231,231,231,0) 0%,rgba(231,231,231,1) 100%); 
  }

  &--dark {
    background: $backgroundDark;
    color: white;
  }
}