JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title>Max Waelbers</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="scrollContent" class="container1">
      <div class="projects">
        <p>title: <a href="#link1">Project 1</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017<br>
            <br>A bundle of texts created by 11 <br>different authors, the texts are<br>sorted by the number of chapters <br>from the different authors.</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link2">Project 2</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link3">Project 3</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link4">Project 4</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link5">Project 5</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link6">Project 6</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>

 <div class="projects">
        <p>title: <a href="#link7">Project 7</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
     <div class="projects">
        <p>title: <a href="#link8">Project 8</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
    <div class="projects">
        <p>title: <a href="#link9">Project 9</a></p>
        <p>details: Typography, Publication<br>
            Letter, 24 pages, 2017</p>
    </div>
  ...

CSS

body{
	margin:0;
}
::-webkit-scrollbar { 
    display: none; 
}
.projects{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 170px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
.about{
    margin-right: 15px;
    margin-left: 10px;
    width: 200px;
    height: 80px;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
}
ul{
    list-style: none;
    float: left;
}
a{
    text-decoration: none;
}
a:visited{
    color: black;
}
a:active{
    color:black;
}
.container1{
	font-family: Favorit;
    font-size: 12px;
    height: 175px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap

}
.container2 {
	margin-left: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap
}
.images {
	height: 500px;
    width: 800px;
    background: black;
    margin-right: 5px;
    overflow-x: scroll;
    white-space: nowrap;
    display: inline-block;
    font-size: 50px;
    color: white;
    text-align: center;
}
.container3{
    font-family: Favorit;
    font-size: 12px;
    white-space: nowrap;
}

JavaScript

/*!
 * jQuery.localScroll
 * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
 * Licensed under MIT
 * http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
 * @author Ariel Flesler
 * @version 1.4.0
 */
 ;(function(plugin) {
    // AMD Support
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], plugin);
    } else {
        plugin(jQuery);
    }
}(function($) {
	var URI = location.href.replace(/#.*/, ''); // local url without hash

	var $localScroll = $.localScroll = function(settings) {
		$('body').localScroll(settings);
	};

	// Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
	// @see http://demos.flesler.com/jquery/scrollTo/
	// The defaults are public and can be overriden.
	$localScroll.defaults = {
		duration: 1000, // How long to animate.
		axis: 'y', // Which of top and left should be modified.
		event: 'click', // On which event to react.
		stop: true, // Avoid queuing animations 
		target: window // What to scroll (selector or element). The whole window by default.
		/*
		lock: false, // ignore events if already animating
		lazy: false, // if true, links can be added later, and will still work.
		filter: null, // filter some anchors out of the matched elements.
		hash: false, // if true, the hash of the selected link, will appear on the address bar.
		onBefore: null // called before scrolling, "this" contains the settings and gets 3 arguments
		*/
	};

	$.fn.localScroll = function(settings) {
		settings = $.extend({}, $localScroll.defaults, settings);

		if (settings.hash && location.hash) {
			if (settings.target) window.scrollTo(0, 0);
			scroll(0, location, settings);
		}

		return settings.lazy ?
			// use event delegation, more links can be added later.		
			this.on(settings.event, 'a,area', function(e) {
				if (filter.call(this)) {
					scroll(e, this, settings); 
				}
			}) :
			// bind concretely, to each matching...