JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="carousel">
    	<div class="card">1</div>
    	<div class="card">2</div>
    	<div class="card">3</div>
    	<div class="card">4</div>
    	<div class="card">5</div>
    	<div class="card">6</div>
    	<div class="card">7</div>
    	<div class="card">8</div>
    	<div class="card">9</div>
    	<div class="card">10</div>
    	<div class="card">11</div>
    	<div class="card">12</div>
    	<div class="card">13</div>
    	<div class="card">14</div>
    	<div class="card">15</div>
    	<div class="card">16</div>
    	<div class="card">17</div>
    	<div class="card">18</div>
    	<div class="card">19</div>
    	<div class="card">20</div>
    </div>
</div>
<button class='prev'>Previous</button>
<button class='next'>Next</button>

CSS

.container {
    	width: 100%;
    	height: auto;
        overflow: hidden;
        overflow-x: scroll;
        border: 1px solid gray;
        margin-bottom: 1rem;
    }
    .container::-webkit-scrollbar {
      width: 10px;
    }
    .carousel {
    	display: flex;
        width: 100%;
        height: 25rem;
        flex-flow: column wrap;
    }
    .card {
        display: flex;
    	background: #fff;
        box-shadow: 0 0 5px #ddd;
        width: 20rem;
        height: 10rem;
        margin: 1rem;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

JavaScript

var button = document.querySelector('.next');
    button.onclick = function () {
      var container = document.querySelector('.container');
      container.scrollLeft += container.clientWidth;
    };

    var back = document.querySelector('.prev');
    back.onclick = function () {
      var container = document.querySelector('.container');
      container.scrollLeft -= container.clientWidth;
    };