JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper_0">
      <div id="header_0"><a href="/">Thomas Benson</a></div>
      <div id="navbar">
        <a href="/">Home</a>
        <a href="/projects/">Projects</a>
        <a href="/school/">School</a>
        <a href="/contact/">Contact</a>
      </div>
      <div id="wrapper_1">
        <span class="header_1">Contact</span>
        <p>If you need to contact me, I can be reached at <a href="mailto:[email protected]">[email protected]</a>.</p>
        <span class="header_2">Web Presence</span>
        <div id="wrapper_2">
          <a class="contact_smwp" href="https://twitter.com/TheRealZix">Twitter</a>
          <a class="contact_smwp" href="http://steamcommunity.com/id/zix666">Steam</a>
          <a class="contact_smwp" href="https://github.com/TheRealZix">GitHub</a>
          <a class="contact_smwp" href="http://stackexchange.com/users/6596962/therealzix">StackExchange</a>
          <div class="contact_smwp">Skype</div>
          <a class="contact_smwp" href="http://www.twitch.tv/therealzix/profile">Twitch</a>
        </div>
      </div>
    </div>
  </body>

CSS

body {
  font-size: 18px;
  font-family: "Helvetica Neue", sans-serif;
  background-color: #e6e1e8;
  margin: 10px 0 0 0;
}

a { outline: none; }

p {
  margin-bottom: 0;
  cursor: default;
  text-align: justify;
}

#wrapper_0 {
  background-color: #f7f7f7;
  width: 900px;
  height: auto;
  margin: 15px auto 0 auto;
  box-shadow: 0 0 5px #808080;
  border-radius: 6px;
}

#header_0 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 60px;
  margin: auto;
  padding: 30px 0 30px 0;
}

#header_0 a {
  text-align: center;
  text-decoration: none;
  color: #000;
  font-size: 60px;
  transition: all 300ms ease 0s;
}

#header_0 a:hover {
  text-shadow: 0 0 8px #6b6b6b;
  color: #7d19a8;
}

#header_0 a:active { color: #4c1066; }

#navbar {
  display: flex;
  height: 80px;
  width: 900px;
}

#navbar > a {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  width: 225px;
  height: 80px;
  font-size: 28px;
  text-decoration: none;
  transition: all 300ms ease 0s;
  color: #000;
}

#navbar a:hover { color: #fff; }
#navbar a:nth-child(1):hover { background-color: #9844eb; }
#navbar a:nth-child(2):hover { background-color: #3b9edb; }
#navbar a:nth-child(3):hover { background-color: #3ac960; }
#navbar a:nth-child(4):hover { background-color: #cc34d1; }
#navbar a:nth-child(1):active { background-color: #6c31a8; }
#navbar a:nth-child(2):active { background-color: #296e99; }
#navbar a:nth-child(3):active { background-color: #288a42; }
#navbar a:nth-child(4):active { background-color: #88218c; }

#wrapper_1 {
  display: block;
  width: 860px;
  padding: 10px 20px 20px 20px;
  overflow: auto;
}

.header_1, .header_2 {
  font-size: 36px;
  font-weight: 200;
  text-decoration: underline;
  text-align: center;
  display: block;
  margin: auto;
  height: auto;
  cursor: default;
}

.header_2 {
  margin-top: 18px;
}

.tooltip {
  border-bottom: 1px dotted #ff0000;
}

.contact_smwp {
  display: flex;
 ...

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  var cur_page = window.location.href.slice(25);
  var b_home = document.querySelector("#navbar a:nth-child(1)");
  var b_projects = document.querySelector("#navbar a:nth-child(2)");
  var b_school = document.querySelector("#navbar a:nth-child(3)");
  var b_contact = document.querySelector("#navbar a:nth-child(4)");

  if (cur_page === "/") {
    b_home.style.fontWeight = "bold";
  } else if (cur_page === "/projects/") {
    b_projects.style.fontWeight = "bold";
  } else if (cur_page === "/school/") {
    b_school.style.fontWeight = "bold";
  } else if (cur_page === "/contact/") {
    b_contact.style.fontWeight = "bold";
  }

  if (cur_page === "/contact/") {
    skype_button = document.querySelector("#wrapper_2 .contact_smwp:nth-child(5)");
    skype_button.onclick = function() {
      if (skype_button.innerHTML === "Skype") {
        skype_button.innerHTML = "Skype Username: tb9908";
      } else {
        skype_button.innerHTML = "Skype";
      }
    };
  }
});