JSFiddle - React, Tailwind, and code Playground

by vi161

HTML

<div class="header-nav">
sdf asdf fdg hj
</div>
<div class="products-nav">
<a href="#a1">a1</a>
<a href="#a2">a2</a>
<a href="#a3">a3</a>
</div>
<div class="content">
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p id="a1" >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p id="a2">sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p id="a3" >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p...

CSS

.header-nav{
  width: 100%;
  height: 50px;
  background: yellow;
}
.products-nav{
  width: 100%;
  height: 30px;
  background: lightgreen;
}
.header-wrap-fixed {
  position: fixed;
  top:0;
  z-index: 1000;
}
.nav-fixed {
  position:fixed;
  top:0px;
  width: 100%;
//  transition: top 1s;
  z-index: 1000;
}
.header-wrap-fixed__off {
  position: unset;
}

JavaScript

<p class="asd">

</p>
<form action="" method="post" class="wpcf7-form">
    <!-- Inputs -->
   <input class="rad" type="radio" name="radio" id="radioButton-y">
   <input class="rad" type="radio" name="radio" id="radioButton-n">
    
    <select name="sel" class="sel" id="sel">
        <option value="Y">Y</option>
        <option value="N">N</option>
    </select>
    <!-- Others inputs -->
</form>