JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<body>

<div class="nav">
    <a href="#home">home</a>
    <br>
    <a href="#contact">contact</a>
</div>

<div class="sideways">
    <div class="images">
        <div class="image">
            <img src="images/img1jpg"/>
        </div>
        <div class="image">
            <img src="images/img2.jpg"/>
        </div>
        <div class="image">
            <img src="images/img3.jpg"/>
        </div>
        <div class="image">
            <img src="images/img4.jpg"/>
        </div>
        <div class="image">
            <img src="images/if-black-could-shine.jpg"/>
        </div>
    </div>
    <div class="contact">
        CONTACT
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>

<script>
$(document).ready(function()
{
  $('a[href=#home]').click(function()
  {
    $('html, body').animate({scrollLeft:0}, 'slow');
    return false;
  });

  $('a[href=#contact]').click(function()
  {
    $('html, body').animate({scrollLeft:$(document).width()}, 'slow');
    return false;
  });
});
 var loaded = 0;
var paneWidth = 0;

$('.images img').load(function() {
  loaded++;

  if (loaded == $('img').length) {
    paneWidth = $('.images').width();
  }
});   
    
</script>

</body>
</html>

CSS

body
{
background:#E8E8E6;
overflow-x: scroll; 
overflow-y: auto;
}

.nav
{
position:fixed;
padding-top:200px;
padding-left:20px;
padding-right:20px;
float: left;
}

.sideways
{
padding-top:20px;
padding-left:100px;
width:1000%;
height:100%;
}

.image
{
float: left;
padding-right:20px;
}

.contact
{
float: left;
padding-right:20px;
}