JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  
  <nav id="navwrapper">
      <div id="navfiller"></div>
      <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection">
        <a href="#navwrapper" class="scrollt">
          <h1 id="titel">headline</h1>
        </a>
        <ul>
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="activenav navb">content1</button></li>
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="2" class="navb">content2</button></li>
        </ul>
      </div>
      </nav>
      
      <div id="wrap" class="contentSection wrapper">
      <!-- SECTION 1 -->
      <section id="content1" class="contentsec" data-number="1">
      <div class="grid-element fade">
            <div class="flip-container">
              <div class="flipper">
                <div class="front">
                  <div class="infowrapper first">
                    <div class="content img__wrap">
                      <img class="img__img" src="https://www.druckterminal.de/assets/images/1/bindearten-ruecken-detail02-f7933d40.jpg">
                      <div class="img__description_layer">
                        <p class="infobild img__description">RĂśCKENDRAHTHEFTUNG</p>
                      </div>
                    </div>
                  </div>
                  <!-- front content -->
                </div>
              </div>
            </div>
          </div>

          <div class="grid-element fade">
            <div class="flip-container">
              <div class="flipper">
                <div class="front">
                  <div class="infowrapper first">
                    <div class="content img__wrap">
                      <img class="img__img"...

CSS

html {
  scroll-behavior: smooth;
}

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

.fade {
  margin: 0;
  padding: 0;
  background-color: lightgreen;
  opacity: 1;
}





/* ONLY FOR LOOKS PLEASE IGNORE */
body {
  height: 100%;
}

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

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

h2 {
  text-align: center;
  font-weight: 300;
  font-size: 1rem;
}

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

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

button {
  cursor: pointer !important;
}

#navfiller {
  position: relative;
  height: 5rem;
}

.navb {
  position: relative;
  top: 50px;
  color: black !important;
  /*color: #87CEEB !important;*/
}

.navb:hover {
  color: #fff !important;
}

#navwrapper {
  background: lightgray;
  height: 300px;
}

#navbar {
  position: fixed;
  text-align: center;
  width: 100%;
  color: white;
  z-index: 999;
  transition: 0.3s;
  background: lightgray;
  height: 200px;
  margin-top: -90px;
}

.selectSection {
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  text-align: center;
}

.selectSection button {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  background-color: rgba(0, 0, 0, 0) !important;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
  border: none;
  border-bottom: 1px;
  outline: none;
}

.selectSection button:hover {
  cursor: pointer;
}

.selectSection button:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.selectSection button:hover:after {
  width: 100%;
  left: 0;
}

.contentsec:not(:first-child) {
  display: none;
}

.contentSection {
  margin: 0px;
  display: block;
  display: grid;
}

.grid-container {
  display:...

JavaScript

$(window).on("load",function() {
  function fade(pageLoad) {
    var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
    var min=0, max=1, threshold=0.01;
    
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
      
      /* Fade element in/out based on its visible percentage */
      if (objectTop < windowTop) {
        if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if (objectBottom > windowBottom) {
        if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
    });
  } fade(true); //fade elements on page-load
  $(window).scroll(function(){fade(false);}); //fade elements on scroll
});
















// change activenav 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 activenav class
    const activenav = document.querySelector(".activenav");
    // check for the button that has activenav class and remove it
    if (activenav) {
      activenav.classList.remove("activenav");
    }
    // add activenav class to the clicked element 
    et.classList.add("activenav");

    // select all classes with the name content
   ...