JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
<title>Side Scrolling Content</title>
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
#schools-sub-nav {
}
#schools-container {
    width: 400px; /* Set the width of the visible portion of content here */
    background-color: fuchsia;
    position: relative;
    /*overflow-x: hidden;*/
    overflow: hidden;
}
#schools-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    /*
    position: absolute;
    top: 0;
    left: 0;
    */
    float: left;
}
#boards-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: green;
    /*
    position: absolute;
    top: 0;
    left: 400px;
    */
    float: left;
}
#schools-container-inside {
    width: 10000px;
    overflow: hidden;
}
</style>
</head>
<body>
<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div>
 <div id="schools-container">
      <div id="schools-container-inside">
         <div id="schools-list"> One </div>
         <div id="boards-list"> Two </div>
      </div>
    </div>
</body>