JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-menu">
    <ul>
      <li data-link="splash">
        <span class="nav-text">Welcome</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="intro">
        <span class="nav-text">Introduction</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="portfolio">
        <span class="nav-text">Our Portfolio</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="about">
        <span class="nav-text">About Us</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="contact">
        <span class="nav-text">Contact Us</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
    </ul>
  </nav>
  <section id="splash">

  </section>
  <header>
  </header>
  <section id="intro">
  </section>
  <section id="portfolio">
  </section>
  <section id="about">
  </section>
  <section id="contact">
  </section>
  <footer>
  </footer>

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: inherit;
    height: inherit;
}

#main-menu {
    border: 1px solid #ff0000;
    padding-right: 5px;
    position: fixed;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main-menu ul {
    text-align: right;
}

#main-menu li {
    cursor: pointer;
    list-style: none;
    min-width: 100px;
}

#main-menu li span.nav-icon {
    width: 4px;
    height: 4px;
    background: #333;
    display: inline-block;
    position: relative;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    vertical-align: middle;
    margin-top: 4px;
}

#main-menu li span.nav-text {
    margin-right: 5px;
    display: none;
    font-size: 8pt;
    font-family: "OpenSansRegular", Helvetica, Arial, sans-serif;
}

JavaScript

$("#main-menu li").on("mouseenter", function() {
    $(this).children("span.nav-text").stop().fadeIn();
});

$("#main-menu li").on("mouseleave", function() {
    $("#main-menu li span.nav-text").stop().fadeOut();
});