JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
  </div>
</div>

<a href="#">1</a>
<a href="#">2</a>

SCSS

.viewport {
  height: 110px;
  width: 200px;
  border: 2px solid blue;
  position: relative;
  margin-left: 230px;
  //overflow: hidden;
}

.container {
  height: 110px;
  width: 400px;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-flow: column wrap;
  border: 2px solid red;
  transition: left .4s ease;
  
  div {
    height: 30px;
    width: 30px;
    border: 2px solid green;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    
    &:nth-child(even) {
      margin-bottom: 0;
    }
    
    &:nth-child(8) {
      margin-right: 25px;
    }
    
    &:nth-child(15),
    &:nth-child(16) {
      margin-right: 0;
    }
  }
}

JavaScript

$('a').click((e) => {
	e.preventDefault();
  if (e.target.innerText == '1') {
  	$('.container').css('left', '0');
  } else {
  	$('.container').css('left', '-200px');
  }
});