JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<h1>Overflow Shadow</h1>
<h2>with Element Queries</h2>

<div>
  <pre>Lorem ipsum dolor sit amet.</pre>
</div>

<div>
  <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</pre>
</div>

<div>
  <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</pre>
</div>

<div>
  <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</pre>
</div>

<div>
  <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</pre>
</div>

CSS

pre {
  white-space: pre;
  border-radius: 3px;
  border: 1px solid;
  padding: 1em;
  overflow: auto;
}

@element div pre and (min-scroll-x: 0px) {
  $parent {
    position: relative;
  }
  $parent:before,
  $parent:after {
    content: '';
    display: block;
    width: 50px;
    height: 100eh;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-in-out;
  }
  $parent:before {
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
  }
  $parent:after {
    right: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 100%);
  }
  /* Left Side Shadow */
  eval("0 < scrollLeft && '$parent:before'") {
    opacity: 1;
  }
  /* Right Side Shadow */
  eval("(scrollLeft + offsetWidth) <= scrollWidth && '$parent:after'") {
    opacity: 1;
  }
}