JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

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

</html>

CSS

.menu{
  display: flex;
  column-gap: 2rem;
}

ul{
  list-style-type: none
}

.message{
  display: none;
}

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 homeContent = document.querySelector(".home-content");
const aboutContent = document.querySelector(".about-content");
const contactContent = document.querySelector(".contact-content");
const productContent = document.querySelector(".product-content");

function displayText(e) {
			homeContent.style.display = "none";
			aboutContent.style.display = "none";
			contactContent.style.display = "none";
			productContent.style.display = "none";
      if (e.target.innerText.toLowerCase() == "home") {
        homeContent.style.display = "block";
        return
      }

      if (e.target.innerText.toLowerCase() == "about us") {
        aboutContent.style.display = "block"; 
        return
      }

      if (e.target.innerText.toLowerCase() == "contact us") {
	      contactContent.style.display = "block";
        return
      }

      if (e.target.innerText.toLowerCase() == "our products") {
	      productContent.style.display = "block";
        return
      }
    }


homeBtn.addEventListener("click", displayText)

aboutBtn.addEventListener("click", displayText)

contactBtn.addEventListener("click", displayText)

productBtn.addEventListener("click", displayText)