JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel = "stylesheet" type = "text/css"  href = "CSS/global.css" />
    <link rel = "stylesheet" type = "text/css"  href = "CSS/examples.css" />
    <link rel = "stylesheet" type = "text/css"  href = "CSS/exampleCase.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="topBarContent">
        <ul>
            <li onclick="window.location.href='index.html'">
              Home
            </li>
            <li onclick="window.location.href='product.html'">
              Products
            </li>
            <li onclick="window.location.href='assistance.html'">
              Assistance
            </li>
            <li onclick="window.location.href='examples.html'">
              Examples
            </li>
            <li onclick="window.location.href='contact.html'">
              Contact
            </li>
        </ul>
    </div>
    <div id="mainCont">
        <h1>Zalman Build</h1>
        <div id="imgCont">
          <button id="bttnLeft" class="button-left button"><</button>
          <img id="mainImg" src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif" />
          <button id="bttnRight" class="button-right button">></button>
        </div>
    </div>
  </body>


  <script src="JS/exampleCase.js"></script>
</html>

CSS

body{
  margin: 0 auto;
  text-align: center;
  padding: 0;
  width:1200px;
  box-shadow:5px 5px 10px #888888;s
}
#topBarContent{
  margin: auto;
}
#topBarContent ul{
  margin: 0;
  padding:0;
  border: 2px dashed black;
  border-left: 0px;
  border-right:0px;
  list-style:none;
  text-align:center;
  background:#ebecf1;
  padding: 0px 0;
}
#topBarContent ul li{
  position:relative;
  display: inline-block;
  cursor:pointer;
  background:#1f4068;
  color:white;
  padding: 15px 0px;
  width:100px;
  border-radius:0px;
  right:250px;
}
#topBarContent ul li:hover{
  background:#1b1c25;
}
#footerCont{
  border-collapse: collapse;
  height:150px;
  background:#ebecf1;
}
#footerCont table{
  margin-left: auto;
  margin-right: auto;
  padding-top:50px;
}
#footerCont table tr td{
  width:600px;
  padding: 0px 10px;
  text-align:left;
}


#indCont{
  margin:auto 0;
  position:relative;
  background:#206a5d;
  padding: 25px 0;
}
#indCont h1{
  padding:0;
  margin:0;
  color:white;
}
#exampleUL{
  margin:auto 0;
  position:relative;
  background:#206a5d;
  padding:0;
  padding-top:25px;
  color:white;
}
#exampleUL ul{
  margin: 0;
  padding:0;
  list-style:none;
}
#exampleUL ul li{
  padding:30px 10px;
  position:relative;
  display: inline-block;
  border-radius:10px;
  width:300px;
  margin: 0 50px;
}
#exampleUL ul li:hover{

  background:#1f4068;
  cursor:pointer;
}
#exampleUL img{
  width:200px;
  height:200px;
}
#mainCont{
  background:#206a5d;
  color:white;
  padding: 25px 0;
}
#mainCont h1{
  padding:0;
  margin:0;
  color:white;
}
#mainCont img{
  max-width:600px;
  max-height:600px;
}
.button{
  cursor:pointer;
  border:0;
  background:#174f44;
  position:relative;
  font-size:20px;
  border-radius:10px;
  opacity:.4;
  height:400px;
}
.button:hover{
  opacity:1;
  box-shadow:1px 1px #174f44;
}
.button-left{

}
.button-right{

}

JavaScript

var imgHeight = $('#mainImg').height();
var currImg = 0;

var imagesSet = ["https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif","https://images.sftcdn.net/images/t_app-logo-xl,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/1578981868/the-test-fun-for-friends-logo.png", "https://hiveconnect.co.za/wp-content/uploads/2018/05/800x600.png", "https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"];
var imageLoc = "images/zalman/"


$(document).ready(function() {
  resizeBttn();
});

$( window ).resize(function() {
  imgHeight = $('#mainImg').height();
  resizeBttn();
});

$('#bttnLeft').click(function(){
  prevImg();
  imgHeight = $('#mainImg').height();
  resizeBttn();
});

$('#bttnRight').click(function(){
  nextImg();
  imgHeight = $('#mainImg').height();
  resizeBttn();
});
function nextImg(){
  currImg++;
  if(currImg>=imagesSet.length){
      currImg=0;
  }
  $('#mainImg').attr("src",imagesSet[currImg]);
}

function prevImg(){
  currImg--;
  if(currImg<0){
      currImg=imagesSet.length-1;
  }
  $('#mainImg').attr("src",imagesSet[currImg]);
}

function resizeBttn() {
  $(document).ready(function() {
        $('#bttnLeft').css("height",imgHeight);
        $('#bttnLeft').css("bottom",imgHeight/2-5);
  });
  $(document).ready(function() {
        $('#bttnRight').css("height",imgHeight);
        $('#bttnRight').css("bottom",imgHeight/2-5);
  });
}