JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
   <div class="box pastries">
     <div class="box item cupcake">Category
       <div class="innerText">
        <p>Ice cream fruitcake cotton candy.</p>
       </div>
     </div>
      
   </div>
   <div class="box textInfo"><h2>Please, select a category first!</h2>       
   </div>
 </div>

CSS

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

.innerText {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

.item:hover .innerText {
  display: block;
  position: absolute;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}