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 class="block9">9</div>
    <div class="block10">10</div>
    <div class="block11">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>

CSS

.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;
 } 
  .container div{
    height: 30px;
    width: 30px;
    border: 2px solid green;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    display: block;
}

 .container div:nth-child(even) {
      margin-bottom: 0;
    }
    
 .container div:nth-child(8) {
      margin-right: 25px;
    }
    
.block9 {
  background:green;
  position:relative;
}
.block10 {
  position:absolute;
  left:251px;
}
.block11 {
  position:relative;
  top:44px;
  left:-45px;
}

JavaScript

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