JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>index</title>

<script type=text/javascript src="navigation.js"></script>
<!--<script type=text/javascript src="navigationSecond.js"></script>-->

<meta name="description" content="Descripton" />

<link rel="stylesheet" type="text/css" href="navigation.css" />


</head>
<body>

<div id="navigation-container">
    <div id="navigation">
      <div>nav1</div>
      <div>nav2</div>
      <div>nav3</div>
      <div>nav4</div>
      <div>nav5</div>
      <div>nav6</div>
    </div>
</div>

<div id="buttons">
  <a href="#" id="button-left">left</a>
  <a href="#" id="button-right">right</a>
</div>

<div id="navigation-container-second">
    <div id="navigation-second">
      <div>nav1</div>
      <div>nav2</div>
      <div>nav3</div>
      <div>nav4</div>
    </div>
</div>

<div id="buttons-second">
  <a href="#" id="button-left-second">left</a>
  <a href="#" id="button-right-second">right</a>
</div>

</body>
</html>

CSS

#buttons {
  position: absolute;
  width: 70px;
  top: 50px;
  right: 10px;
  text-align: right;
  outline: 1px solid red;
}

#buttons-second {
  position: absolute;
  width: 70px;
  top: 100px;
  right: 10px;
  text-align: right;
  outline: 1px solid red;
}

#navigation-container {
  position: absolute;
  left: 10px;
  top: 50px;
  right: 80px;
  overflow: hidden;
  outline: 1px solid red;
}

#navigation-container-second {
  position: absolute;
  left: 10px;
  top: 100px;
  right: 80px;
  overflow: hidden;
  outline: 1px solid red;
}

#navigation {
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

#navigation:after {
  content: "";
  clear: both; 
}

#navigation-second {
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

#navigation-second:after {
  content: "";
  clear: both; 
}

#navigation div {
  float: left;
  width: 200px;
  background-color: #99CC33;
  color: #006633;
}

#navigation-second div {
  float: left;
  width: 200px;
  background-color: #99CC33;
  color: #006633;
}

JavaScript

function Navigation(navigationcontainer, navigation, buttons, buttonleft, buttonright) {
    
  var that = this;
  
  that.buttonPressed = false,
  
  that.containerWidth = null,
  that.width = null,
  that.maxScrollLeft = null,
  
  that.element = null,
  that.container = null,
  that.buttons = null,
  
  that.addEvent = function (obj, type, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {
      obj.attachEvent('on' + type, function () {
        return fn.call(obj, window.event);
      });
    }
  },
  
  that.scrollRight = function () {
      el = that.container,
      scrollLeft = el.scrollLeft;
    
    step();
    function step () {
      if (!that.buttonPressed) return;
      scrollLeft += 10;
      if (scrollLeft < that.maxScrollLeft) {
        el.scrollLeft = scrollLeft;
        setTimeout(step, 1000 / 60);
      } else {
        el.scrollLeft = that.maxScrollLeft;
      }
    }
  },
  
  that.scrollLeft = function () {
      el = that.container,
      scrollLeft = el.scrollLeft;
    
    step();
    function step () {
      if (!that.buttonPressed) return;
      scrollLeft -= 10;
      if (scrollLeft > 0) {
        el.scrollLeft = scrollLeft;
        setTimeout(step, 1000 / 60);
      } else {
        el.scrollLeft = 0;
      }
    }
  },
  
  that.buttonLeftDown = function () {
    that.buttonPressed = true;
    that.scrollLeft();
  },
  
  that.buttonRightDown = function () {
    that.buttonPressed = true;
    that.scrollRight();
  },
  
  that.buttonUp = function (e) {
    that.buttonPressed = false;
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  },
   
  that.init = function () {
    
    that.addEvent(window, 'resize', that.setupWidths);
    
    that.container = document.getElementById(navigationcontainer);
    that.element = document.getElementById(navigation);
    that.buttons = document.getElementById(buttons);
    
   ...