JSFiddle - React, Tailwind, and code Playground

by Bob Wendell

HTML

<main>
        <section id="scrollSection" class="scroll">

        </section>
        <section id="panel" class="panel">
            <button id="back" class="btn">back</button>
            <button id="next" class="btn">next</button>
          </section>
    </main>

CSS

.scroll {
    background-color: black;
    padding: 50px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap; 
  }

  .panel {
    display: flex;
    justify-content: space-between;
  }
  
  .btn {
    border-radius: 8px;
    background-color: rgb(168, 103, 228);
    padding: 8px;
    width: 50%;
  }

  .cards {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    margin: 30px;
    display: inline-block;
}

JavaScript

const data = [
  
  {
    color: 'red',
  },

  {
    color: 'yellow',
  },

  {
    color: 'green',
  },

  {
    color: 'blue',
  },

  {
    color: 'white',
  },

  {
    color: 'orange',
  },

  {
    color: 'gray',
  },

  {
    color: 'brown',
  },

  {
    color: 'purple',
  },

]

const createCard = (color) => {
  const scrollSection = document.getElementById('scrollSection');
  const div = document.createElement('div');
  div.className = 'cards';
  div.style.backgroundColor = color;
  scrollSection.appendChild(div);
};


addEventListener('click', (event) => {
  if (event.target.id === 'next') {
    document.getElementById('scrollSection').scrollBy(500, 0);
  };
  if (event.target.id === 'back') {
    document.getElementById('scrollSection').scrollBy(-500, 0);
  }
  if (event.target.id === 'mobile') {
    document.getElementById('scrollSection').classList.toggle('mobile')
  }
  
})

data.map( object => createCard(object.color));