<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<html>
  <body>
    <main>
      <section id="hero" class="h-screen p-6 container mx-auto">
        <ul class="flex items-center gap-x-4 text-blue-500 justify-center">
          <li>
            <a href="#first">Go to first section</a>
          </li>
          <li>
            <a href="#second">Go to second section</a>
          </li>
          <li>
            <a href="#third">Go to third section</a>
          </li>
        </ul>
      </section>
      <section class="p-6 h-screen bg-gray-300" id="first">First section</section>
      <section class="p-6 h-screen bg-blue-300" id="second">Second section</section>
      <section class="p-6 h-screen bg-gray-300" id="third">Third section</section>
    </main>
  </body>
</html>
html{
  scroll-behavior: smooth;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.