JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<div id="menu">
  <a href="#entete">Acceuil</a>
  <a href="#img1">Green</a>
  <a href="#img2">Blue</a>
  <a href="#img3">Red</a>
</div>
<div class="content">
<div id="entete">entete</div>
<div id="img1">img1</div>
<div id="img2">img2</div>
<div id="img3">img3</div>
</div>

CSS

body {margin:0;padding:0;}
#entete {height:500px;background:pink;}
#img1 {height:500px;background:green;}
#img2 {height:500px;background:blue;}
#img3 {height:500px;background:red;}
#menu {position:fixed;z-index:1;}
.content>div {padding-top:3em;}
#menu>a
{
    background-color: #CC0033;
    padding: 10px 15px;
	width: auto;
	height: auto;
	margin: 0px 0px 0px -1px;
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	border-spacing: 0px 0px;
}

#menu>a:hover
{
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;
}

#menu>a.selected {background-color: rgba(0,0,0,0.1); color: #FFFFFF;}

JavaScript

var a = document.querySelectorAll('#menu>a'), i, nb = a.length;
for( i = 0; i <nb; i++ )
{
    a[ i ].onclick = function(e)
    {
        var b = document.querySelectorAll('#menu>a'), j;
        // e.preventDefault();
        for( j = 0; j < nb; j++ )
        {
            if (b[ j ] == this)
                this.className = "selected";
            else b[ j ].className = "";
        }
    };
}