JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">

  <a class="button" href="#entete">Acceuil</a>
  <a class="button" href="#img1">Green</a>
  <a class="button" href="#img2">Blue</a>
  <a class="button" href="#img3">Red</a>
  <a class="button" href="#img4">Purple</a>
  <a class="button" href="#img5">Pink</a>
  <a class="button" href="#img6">Orange</a>


 </div><!-- #menu -->

CSS

.button {
	padding: 10px 15px;
	width: auto;
	height: auto;
	margin: 0px 0px 0px -1px;
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	border-spacing: 0px 0px;
	/*  Smiley disabled left: -50px; */
	background-color: #CC0033;
}
.button:hover {
	font-weight:bold;
	font-style:italic;
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;
	border-radius: 0px;
	/*  Smiley disabled border-bottom-width: thin; */
	/*  Smiley disabled border-bottom-style: solid; */
	/*  Smiley disabled border-bottom-color: #FFFFFF; */
}
.entete {background: grey;}
.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}
.img4 {background: purple;}
.img5 {background: pink;}
.img6 {background: orange;}

JavaScript

var oRadio = document.querySelectorAll('.button'),
    i  = 0,
    nb = oRadio.length;

  for(; i <nb; i++){
    oRadio[i].onclick = function(e){
      document.body.className = (e.target || e.srcElement).hash.substring(1);
    };
  }