JSFiddle - React, Tailwind, and code Playground

HTML

<div class="service-thumb">
  <span><svg style="width:70px;height:70px" viewBox="0 0 24 24"><path fill="#000000" d="M22,9V7H20V5A2,2 0 0,0 18,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21H18A2,2 0 0,0 20,19V17H22V15H20V13H22V11H20V9H22M18,19H4V5H18V19M6,13H11V17H6V13M12,7H16V10H12V7M6,7H11V12H6V7M12,11H16V17H12V11Z" /></svg></span>
  <div class="thumb-text">
    <h2>Briefing</h2>
    <p>Nós criamos a trajetória certa para que seu negócio cresça</p>
  </div>
</div>

CSS

.service-thumb {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px;
}

.service-thumb,
.service-thumb .thumb-text,
.service-thumb path {
  transition: all .8s ease-in-out;
}

.service-thumb:hover {
  background-color: rgba(0, 0, 0, 1);
}

.service-thumb:hover .thumb-text,
.service-thumb:hover path {
  color: #fff;
  fill: #fff;
}