JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<html>
<head>
  <title>HTML Page</title>
</head>
<body>
  
  <h1 id="home-menu">
    home
  </h1>
  <h1 id="about-menu">
    about us
  </h1>
  <h1 id="contact-menu">
    contact us
  </h1>
  <h1 id="product-menu">
    our products
  </h1>
  <div>
    <div class="home-content">Welcome to home</div>
    <div class="about-content">Welcome to home</div>
    <div class="contact-content">Welcome to home</div>
    <div class="product-content">Welcome to home</div>
  </div>
</body>

</html>

CSS

body{
  display: flex;
  column-gap: 2rem;
}

body h1{
  cursor: pointer;
}

JavaScript

const homeBtn = document.getElementById("home-text");
const aboutBtn = document.getElementById("about-text");
const contactBtn = document.getElementById("contact-text");
const productBtn = document.getElementById("product-text");
const body = document.getElementsByTagName("body")[0];

homeBtn.addEventListener("click", ()=>{
	aboutBtn.style.display = "none";
  contactBtn.style.display = "none";
  productBtn.style.display = "none";
  
  const greetMessage = document.createElement("p");
  body.appendChild(greetMessage);
  greetMessage.innerText = "Welcome to Home Page";
})

aboutBtn.addEventListener("click", ()=>{
	homeBtn.style.display = "none";
  contactBtn.style.display = "none";
  productBtn.style.display = "none";
  
  const greetMessage = document.createElement("p");
  body.appendChild(greetMessage);
  greetMessage.innerText = "Welcome to about Page";
})

contactBtn.addEventListener("click", ()=>{
	aboutBtn.style.display = "none";
  homeBtn.style.display = "none";
  productBtn.style.display = "none";
  
  const greetMessage = document.createElement("p");
  body.appendChild(greetMessage);
  greetMessage.innerText = "Welcome to contact Page";
})

productBtn.addEventListener("click", ()=>{
	aboutBtn.style.display = "none";
  contactBtn.style.display = "none";
  homeBtn.style.display = "none";
  
  const greetMessage = document.createElement("p");
  body.appendChild(greetMessage);
  greetMessage.innerText = "Welcome to product Page";
})