JSFiddle - React, Tailwind, and code Playground

HTML

<title>
    </title>
  <body>
    <!-- Navigation Bar -->
    <ul>
      <li>
        <a href="test_webpage.html#about">ABOUT
        </a>
      </li>
      <li>
        <a href="test_webpage.html#coupons">COUPONS
        </a>
      </li>
      <li>
        <a href="test_webpage.html#feedback">FEEDBACK
        </a>
      </li>
    </ul>
    <img src="https://preview.ibb.co/dr3y7v/vintage.png" height="660px" width="100%">
    <h2>
      <span style="background-color: rgba(26, 102, 255, 0.75)">BRINGING YOU CONVENIENCE
      </span>
    </h2>
    <h3>
      <span style="background-color: rgba(26, 102, 255, 0.75)">SINCE THE 2000's
      </span>
    </h3>
    <div id='about'>
      <a id="about" name='about'>
        <div id='opaque'>
          <img src="https://preview.ibb.co/bS5nja/gas_station_hero_image.jpg" height="680px" width="100%">
        </div>
        <h4>WHO WE ARE
        </h4>
        <div id='divp2'> 
          <p>WE ARE A SMALL CONVENIENCE STORE LOCATED IN THE HEART OF CARY, NORTH CAROLINA. WE SPECIALIZE IN CRAFT BEER AND EXQUISITE WINE. WE HAVE ALL YOUR QUICK GROCERY NEEDS. WE HAVE THE BEST PRICES IN OUR AREA GUARANTEED! COME VISIT US FOR A TRULY ENLIGHTENING EXPERIENCE! WE ARE ON GOOGLE SO IF YOU WANT TO SEE OUR REVIEWS OR GIVE US ONE, YOU CAN!
          </p>
        </div>
        <div id='divp'>
          <p>YOU MIGHT BE WONDERING, WHY SHOULD I COME HERE? WHAT MAKES THIS GAS STATION DIFFERENT FROM OTHER GAS STATIONS? WELL, WITH EXCELLENT STAFF, LOW PRICES, AND CLEAN FLOORS, THE BETTER QUESTION SHOULD BE, WHY SHOULDN'T I COME HERE! WE HOPE YOU COME TO OUR STORE AND HAVE A FABULOUS EXPERIENCE. IF YOU DO EXPERIENCE ANY DIFFICULTIES DURING YOUR TIME HERE, PLEASE FEEL FREE TO CONTACT THE MANAGER. HE WILL RESOLVE YOUR COMPLAINTS IN NO TIME!
          </p>
        </div>
      </a>
    </div>
    <div id='coupons'>
      <a id="coupons" name='coupons'>
        <div style="float:left">  
          <img id='myImg'...

CSS

ody {
    margin: 0px;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: mediumblue;
    font-family: monospace;
    font-size: 15px;
    text-align: center;
    width: 100%;
    top: 0;
  }
  li {
    display: inline-block;
  }
  li a {
    display: block;
    color: white;
    padding: 14px 75px;
    text-decoration: none;
  }
  li a:hover:not(.active) {
    background-color: darkblue;
    font-style: italic;
  }
  img {
    position: relative;
    display: block;
  }
  h2 {
    position: absolute;
    top: 190px;
    text-align: center;
    width: 100%;
    font-size: 65px;
    color: white;
    font-family: sans-serif;
    font-style: italic;
  }
  h3 {
    position: absolute;
    top: 265px;
    text-align: center;
    width: 100%;
    font-size: 65px;
    color: white;
    font-family: sans-serif;
    font-style: italic;
  }
  h4 {
    position: absolute;
    text-align: center;
    font-family: sans-serif;
    font-style: italic;
    width: 100%;
    font-size: 60px;
    top: 700px;
    color: #1A66FF;
  }
  #divp2{
    font-size: 20px;
    font-family: 'hind';
    position: absolute;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
    color: #4d4d4d;
    top: 900px;
    margin-left: 150px;
    margin-right: 150px;
    font-weight: 0;
  }
  @font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }
  #pformat{
    text-align: center;
    margin-right: 30px;
    font-size: 55px;
    font-family: sans-serif;
    margin-left: 620px;
    position: absolute;
    top: 1450px;
    font-style: italic;
    color: #1A66FF;
    font-weight: bold;
  }
  #opaque {
    opacity: .2;
  }
  #divp {
    font-size: 20px;
    font-family: 'hind';
    position: absolute;
    text-align: center;
    top: 1075px;
    margin-left: 150px;
    margin-right: 150px;
    color: #4d4d4d;
  }
  #myImg {
    border-radius: 5px;
    cursor: pointer;
    transition:...

JavaScript

// Get the modal
          var modal = document.getElementById('myModal');
          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var img = document.getElementById('myImg');
          var modalImg = document.getElementById("img01");
          img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
          }
          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          // When the user clicks on <span> (x), close the modal
          span.onclick = function() {
            modal.style.display = "none";
          }