JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
  <div class="arrows">
    <div class="arrow-down"></div>
  </div>
  <div class="buttons">
    <button class="home">Home</button>
    <button class="about">About</button>
  </div>
</div>

<div class="titleHome">
  <p1>Home</p1>
  <div id="bubble"></div>
  <div id="tri"></div>
</div>

CSS

.home {
  position: relative;
  background: none;
  border: none;
  margin: 0;
  padding: 2px;
  padding-left: 40px;
  padding-right: 10px;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  color: grey;
  left: 50px;
  width: 100px;
  height: 30px;
  background: url("tricolour-queens-university-oneclass.png");
  background-size: 33px 23px;
  background-repeat: no-repeat;
  background-position: 0 3px;
}

.about {
  position: relative;
  background: none;
  border: none;
  margin: 0;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  color: grey;
  left: 65px;
  top: 12px;
  width: 100px;
  height: 30px;
}

.titleHome {
  display: none
}

JavaScript

$(".home").hover(
  function() {
    $(".arrow-down").show();
    if ($(window).width() < 900) {
      $(".arrow-down").css("left", "70px");
      $(".titleHome").fadeIn();
    } else {
      $(".arrow-down").css("left", "100px");
    }
  },
  function() {
    $(".arrow-down").hide();
    $(".titleHome").fadeOut();
  }
);