JSFiddle - React, Tailwind, and code Playground

HTML

<div class="artist__media">
  <div class="content">
                <div class="media video">
                  <a href="/#">
                    <img src="https://is5-ssl.mzstatic.com/image/thumb/Music117/v4/0b/d3/38/0bd3387c-ed4d-790e-2d57-b08b2406158a/886446370019.jpg/268x0w.jpg" alt="" />
                    <p>{'NOW that\'s what I call music 1997'}</p>
                  </a>
                </div>

                <div class="media video">
                  <a href="/#">
                    <img src="https://is5-ssl.mzstatic.com/image/thumb/Music117/v4/0b/d3/38/0bd3387c-ed4d-790e-2d57-b08b2406158a/886446370019.jpg/268x0w.jpg" alt="" />
                    <p>{'NOW that\'s what I call music 1997'}</p>
                  </a>
                </div>

                <div class="media video">
                  <a href="/#">
                    <img src="https://is5-ssl.mzstatic.com/image/thumb/Music117/v4/0b/d3/38/0bd3387c-ed4d-790e-2d57-b08b2406158a/886446370019.jpg/268x0w.jpg" alt="" />
                    <p>{'NOW that\'s what I call music 1997'}</p>
                  </a>
                </div>

                <div class="media video">
                  <a href="/#">
                    <img src="https://is5-ssl.mzstatic.com/image/thumb/Music117/v4/0b/d3/38/0bd3387c-ed4d-790e-2d57-b08b2406158a/886446370019.jpg/268x0w.jpg" alt="" />
                    <p>{'NOW that\'s what I call music 1997'}</p>
                  </a>
                </div>

                <div class="media video">
                  <a href="/#">
                    <img src="https://is5-ssl.mzstatic.com/image/thumb/Music117/v4/0b/d3/38/0bd3387c-ed4d-790e-2d57-b08b2406158a/886446370019.jpg/268x0w.jpg" alt="" />
                    <p>{'NOW that\'s what I call music 1997'}</p>
                  </a>
                </div>

                <div class="media video">
                  <a href="/#">
                    <img...

SCSS

.artist__media {
  margin-top: 50px;
  position: relative;
  &:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 15px;
      pointer-events: none;
      background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
      width: 15%;
    }
  
  .content {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }

  .media {
    display: inline-block;
    margin: 0px 30px 20px 0px;

    img {
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
    }

    p {
      font-size: 1.3rem;
      color: #333;
    }

    a {
      &:hover, &:focus, &:active {
        color: #333;
        text-decoration: none;
      }
    }
  }
}