JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

HTML

<button onclick="goToFeedPage()">go to Feed page</button>
<button onclick="goToSettingsPage()">go to Settings page</button>
<button onclick="simulateBookmarkHighlight()">Highlight</button>

<div class="settings page">
  <h1>Settings</h1>
  <button class="company-privacy-always-anonymous">Always post as anonymous</button>
</div>

<div class="feed page visible">
  <h1>Feed</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget metus turpis. Cras lectus risus, cursus scelerisque venenatis gravida, rhoncus et ligula.
  </p>
  <p>
    Donec quis eros sed tellus cursus commodo. In volutpat justo risus, ac viverra nisi hendrerit vitae. In lobortis, nisl ut iaculis bibendum, lectus neque dictum neque, ut mollis augue turpis eu lacus.
  </p>
  <button class="company-privacy-always-anonymous">Always post as anonymous</button>
</div>

CSS

.page.visible {
  display: block;
}

.page {
  display: none;
}

JavaScript

function goToFeedPage() {
  document.querySelectorAll('.page').forEach((page) => {
    page.classList.remove('visible');
  });
  document.querySelector('.feed').classList.add('visible');
};

function goToSettingsPage() {
	document.querySelectorAll('.page').forEach((page) => {
    page.classList.remove('visible');
  });
  document.querySelector('.settings').classList.add('visible');
};

function simulateBookmarkHighlight() {
  document.querySelectorAll('.company-privacy-always-anonymous').forEach((element) => {
    element.style.border = '3px solid red';
  });
}