JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<html>
  <nav id="navwrapper">
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="javascript/navbar fixed.js"></script>
    <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection">
      <h1 id="titel">HEADLINE</h1>
      <ul>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="active navb">content1</button></li>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="2" class="navb">content2</button></li>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="3" class="navb">content3</button></li>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="4" class="navb">content4</button></li>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="5" class="navb">content5</button></li>
      </ul>
      <!--<div class="selectSection">
		    <button type="button" data-number="1" class="active">content1</button>
				<button type="button" data-number="2">content2</button>
				<button type="button" data-number="3">content3</button>
        <button type="button" data-number="4">content4</button>
        <button type="button" data-number="5">content5</button>
    </div>-->
    </div>
  </nav>
 
  
  <div id="wrap" class="contentSection wrapper">
  <section id="content1" class="content" data-number="1">
    <div>
    content 1
    </div>
  </section>
  
  <section id="content2" class="content" data-number="2">
    <div>
    content 2
    </div>
  </section>
  
  <section id="content3" class="content" data-number="3">
    <div>
    content 3
    </div>
  </section>
  
  <section id="content4" class="content" data-number="4">
    <div>
    content 4
    </div>
  </section>
  
  <section id="content5" class="content" data-number="5">
    <div>
    content 5
   ...

CSS

html {
  scroll-behavior: smooth;
}

* {
  margin: 0 !important;
  padding: 0;
  font-family: helvetica;
}

body {
  height: 300vh;
}

/*:target:before {
    content: "";
    display: block;
    height: 130px;
    margin: -130px 0 0;
}*/

#wrap {
  scroll-margin-top: 130px;
}

h1 {
  text-align: center;
  font-size: 5rem;
  top: 2vh;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 300;
  margin-top: 3vh;
  font-size: 1rem;
}

ul {
  list-style: none;
  text-align: center;
}

ul li {
  display: inline-table;
  margin-left: 0.25vw;
  padding: 0.25vw;
}

#navbar {
  text-align: center;
  width: 100%;
  color: white;
  z-index: 999;
  transition: 0.3s;
}

#navwrapper {
    background: linear-gradient(250deg, #0061ff, #60efff);
    background-size: 400% 400%;
    height: 250px;
}

#navbar.shrink {
  height: 130px;
  line-height: 18px;
  position: fixed;
  background-color: lightgray !important;  
  transition: 0.3s;
}

#navbar.shrink li {
  font-size: 1.2rem;
  margin-top: 1.5vh;
  transition: 0.3s;
}

#navbar.shrink a {
  color: #343a40 !important;
}

#navbar.shrink a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  background: #343a40 !important;
}

#navbar.shrink h1 {
  font-size: 4rem;
  color: #343a40;
  top: 2vh;
  transition: 0.3s;
}

button {
  position: relative;
  top: 100px;
}

.wrapper {
  position: absolute;
  top: 250px;
}

.selectSection {
	display: grid;
	grid-template-columns: repeat( 3, 1fr);
	justify-content: center;
	text-align: center;
  margin-top: 10px;
}
.selectSection button {
  font-size: 18px;
	background-color: rgba(209, 207, 207, 0.575);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	margin-left: 10px;
	border: 0;
  padding: 3px;
}
.selectSection button:hover {
	cursor: pointer;
}
.active {
	background-color: #87CEEB !important;
}
/* hides every element except the first */
.content:not(:first-child) {
	display:...

JavaScript

$(function() {
  var shrinkHeader = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('#navbar').addClass('shrink');
    } else {
      $('#navbar').removeClass('shrink');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});


// change active class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp


// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");

// loop through the buttons using for..of 
for (let button of Buttons) {
  // listen for a click event 
  button.addEventListener('click', (e) => {
    // et = event target
    const et = e.target;
    // slect active class
    const active = document.querySelector(".active");
    // check for the button that has active class and remove it
    if (active) {
      active.classList.remove("active");
    }
    // add active class to the clicked element 
    et.classList.add("active");
    
    // select all classes with the name content
    let allContent = document.querySelectorAll('.content');

    // loop through all content classes
    for (let content of allContent) {
      // display the content if the class has the same data-attribute as the button 
      if(content.getAttribute('data-number') === button.getAttribute('data-number')) {
        content.style.display = "block";
       }
      // if it's not equal then hide it.
      else {
        content.style.display = "none";
       }
     }
  });
}