JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <table class="bordered no-bottom-border allocation text-centered swiper-slide">
      <thead>
        <tr>
          <th>33</th>
          <th>34</th>
          <th>35</th>
          <th>36</th>
          <th>37</th>
          <th>38</th>
          <th>39</th>
          <th>40</th>
          <th>41</th>
          <th>42</th>
          <th>43</th>
          <th>44</th>
          <th>45</th>
          <th>46</th>
          <th>47</th>
          <th>48</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="100"></td>
          <td><input type="number" value="80"></td>
          <td><input type="number" value="60"></td>
          <td><input type="number" value="60"></td>
          <td><input type="number" value="60"></td>
          <td><input type="number" value="60"></td>
          <td><input type="number" value="0"></td>
          <td><input type="number" value="0"></td>
          <td><input type="number" value="0"></td>
          <td><input type="number" value="0"></td>
          <td><input type="number" value="0"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.swiper-container{
  width: 500px;
  overflow: hidden;
  border: solid 1px #e2e2e2;
  background-color: #fff;
  padding: 20px 10px;
}

input {
      border: solid 1px transparent;
      width: 40px;
      font-family: inherit;
      font-size: inherit;
      padding: 3px;
      position: relative;
      top: -3px;
      text-align: center;
      background-color: transparent;
      transition-property: border-color, background-color;
      transition: all 0.5s ease;

      &:focus{
        outline:none;
        background-color: #fff;
        border-color: $line-color;
      }
    }
    
    ::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

JavaScript

var swiper = new Swiper('.swiper-container', {
  	freeMode: true,
    freeModeSticky: false,
    grabCursor: true
  });