JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<nav class="navbar" id="nav--bar">
      <ul>
        <li><a href="#1" class="link--a">DIV 1</a></li>
        <li><a href="#2" class="link--a">DIV 2</a></li>
        <li><a href="#3" class="link--a">DIV 3</a></li>
      </ul>
    </nav>
    <section id="1">
      <div class="div div--1">This is DIV 1</div>
    </section>
    <section id="2">
      <div class="div div--2">This is DIV 2</div>
    </section>
    <section id="3">
      <div class="div div--3">This is DIV 3</div>
    </section>

CSS

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.div--1 {
  background-color: rgb(0, 132, 255);
}

.div--2 {
  background-color: rgb(255, 136, 0);
}

.div--3 {
  background-color: rgb(255, 0, 242);
}

.navbar ul {
  display: flex;
  justify-content: space-around;
  background-color: rgb(179, 230, 245);
  list-style: none;
  padding: 1.5em;
  border-radius: 12px;
  border: 1px solid black;
}

.navbar ul li a {
  background-color: yellow;
  padding: 1em;
  border-radius: 12px;
  border: 1px solid black;
  text-decoration: none;
}

.navbar ul li:hover {
  background-color: orangered;
  cursor: pointer;
}

.navbar {
  width: 90%;
}

section {
  width: 75%;
}

.div {
  margin: 1em;
  border-radius: 12px;
  border: 1px solid black;
  font-size: 5em;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}