JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <h1>Money Management</h1>
    <div class="app_tab">
      <button class="pageclick" onclick="openPage(event, 'The Basics')">The Basics</button>
      <button class="pageclick" onclick="openPage(event, 'How?')">How?</button>
      <button class="pageclick" onclick="openPage(event, 'Money Manager')">Money Manager</button>
    </div>
    <div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRc0WpQLKO7Gk9G6m-60U5u1GjXBi8fO6TxOA&usqp=CAU'); background-size: cover;" id="The Basics" class="pageinfo">
      <h2>What is Money?</h2>
      <h3>Slangwise, money is basically paper and coins with official government authorization.</h3>
      <h3>But actually, money is a medium of exchange that is accepted widely for different types of purchases.</h3>
      <h2>What is Money Management?</h2>
      <h3>Money Management is the practice by which one yields the most optimal cost to profit ratio.</h3>
      <h2>Why should we manage our money?</h2>
      <ol>It keeps you out of debt and keeps your budget favorable enough to buy all of your needs and even some wants</ol>
      <ol>If you are not careful, you may end up losing every single penny</ol>
      <ol>Saving money helps for the future.</ol>
      <ol>Everyone likes seeing a few extra notes in their bank account right? ;p</ol>
      <h2>Where, When, Who?</h2>
      <h3>Money Management should be used anywhere and everywhere at any time possible by anyone seeking to make favorable purchases</h3>
    </div>
    <div div style="background-image: url('https://images2.alphacoders.com/576/576485.jpg'); background-size: cover;" id="How?" class="pageinfo">
      <h2>What are the different types of ways to manage your money?</h2>
      <h3>1. Insitute a Budget</h3>
      <ol>First, calculate your earnings</ol>
      <ol>Then, create a small outline of how you will spend them</ol>
      <ol>Tip: First outline your needs; then only, write down...

CSS

body {
  background-image: url("https://www.wallpapers13.com/wp-content/uploads/2015/12/Mountains_at_fall_trees_leaves_lakes_colors_ultra-hd-wallpaper-3840x2160-1920x1080.jpg");
  background-size: cover;
  color: black;
}

.app_tab {
  overflow: hidden;
  border: 1px solid #745b01;
  background-color: #b4b4b4;
}

/* Style the buttons inside the tab */
.app_tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 66px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.app_tab button:hover {
  background-color: #00f1b7;
}

/* Create an active/current tablink class */
.app_tab button.active {
  background-color: #00f1eb;
}

.pageinfo {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript

function openPage(evt, pageName) {
  var i, pageinfo, pageclick;
  pageinfo = document.getElementsByClassName("pageinfo");
  for (i = 0; i < pageinfo.length; i++) {
    pageinfo[i].style.display = "none";
  }
  pageclick = document.getElementsByClassName("pageclick");
  for (i = 0; i < pageclick.length; i++) {
    pageclick[i].className = pageclick[i].className.replace(" active", "pageclick");
  }
  document.getElementById(pageName).style.display = "block";
  evt.currentTarget.className += " active";
}

var check_wants;

function expenditure_calculator() {
  var earnings = document.getElementById("Earnings").value;
  var Needs = document.getElementById("Needs").value;
  var Wants = document.getElementById("Wants").value;
  var Savings = document.getElementById("Savings").value;
  if (Savings < ((5 / 100) * Earnings)) {
    Savings = (5 / 100) * Earnings
  }
  var main_expenses = earnings - Needs;
  var gross_percentage = (main_expenses * 100) / earnings;
  var save_money = (Savings * 100) / main_expenses;
  var purchase_wants = gross_percentage - save_money;
  var wants_percentage = (Wants * 100) / earnings;
  if (purchase_wants < wants_percentage) {
    check_wants = "You do not have enough money to purchase your wants.";
  } else {
    check_wants = "You have enough money to purchase your wants and save at least 5% of your earnings.";
  }
document.getElementById("earnings").innerHTML = earnings;
document.getElementById("gross_percentage").innerHTML = gross_percentage;
document.getElementById("save_money").innerHTML = save_money;
document.getElementById("wants_percentage").innerHTML = wants_percentage;
document.getElementById("check_wants").innerHTML = check_wants;
}