JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">PortfĂłlio</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> </button>
</div>

CSS

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}

.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}

.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}

.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

JavaScript

$(document).ready(function() {
  $(window).resize(function() {
    var altura = $(".textiu").height();
    if (altura > 20) {
      $('.logo').css("background-color", "yellow")
    }
  });
});