// If you think it's the <hr/> tag, then you are correct! It's a self-enclosing HTML tag that is as the name suggests, a horizontal line.
// We run into a problem when trying to add this horizontal line though. If we put it at the bottom of our code, it's still enclosed with the <div> container that contains flex. This results in our line displaying on the same x-axis as our other elements. If we want it to go below, we need to create yet ANOTHER container that encompasses the entirety of what we've created thus far to separate our current Navbar, and the new horizontal line we will be creating.
// Here's the final code for this entire section.

import React from "react";

function Navbar() {
  return (
    <>
      <div className="flex flex-row justify-between items-center px-20 py-4 bg-pastelblue">
        {/* TITLE */}
        <div className="text-darkgreen text-3xl poppins-bold hover:text-pastelgreen transition duration-300">
          Ripple & Refresh
        </div>
        {/* PAGES */}
        <div className="flex flex-row gap-8 poppins-semibold text-2xl text-darkblue">
          <p className="hover:text-pastelgreen transition duration-300">map</p>
          <p className="hover:text-pastelgreen transition duration-300">rsvp</p>
          <p className="hover:text-pastelgreen transition duration-300">
            activity
          </p>
        </div>
      </div>
      {/* Horizontal line separator */}
      <hr className="w-full border-t-2 border-pastelgreen border-opacity-50" />
    </>
  );
}

export default Navbar;