TailwindCSS

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Nav bar pinning question using GSAP</title>

		<!-- GSAP -->
		<script
			defer
			src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
			integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"></script>
		<script
			defer
			src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"
			integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"></script>

    <!-- TailwindCSS -->
    <link rel="stylesheet" href="https://cdn.tailwindcss.com">

    <!-- Custom CSS -->
    <style>
      @import url("https://cdn.tailwindcss.com");
      @tailwind base;
      @tailwind components;
      @tailwind utilities;

      /* Custom styles */
      .nav {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.25rem;
        letter-spacing: -0.025em;
      }

      .nav__link {
        color: #374151;
        transition: color 0.3s ease-in-out;
      }

      .nav__link:hover {
        color: #2563EB;
      }

      .logo {
        width: 32px;
        height: 32px;
      }

      .section-1 {
        background-image: url("https://images.unsplash.com/photo-1611095973763-414019e724a9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGFuZGluZyUyMHBhZ2V8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
        background-size: cover;
        background-position: center;
      }

      .section-2 {
        background-color: #F9FAFB;
      }

      .section-3 {
        background-color: #F3F4F6;
      }
    </style>

    <!-- Custom JS -->
    <script>
      // Wait for the page to load
      window.addEventListener("load", function () {
        // Select the navbar element
        const nav = document.querySelector(".nav");

        // Create a ScrollTrigger instance for the navbar
        Scroll