JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        Содержимое 1
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 2
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 3
    </div>
</div>

CSS

.outer {
  padding:20px;
  height:100px;
  background-color: green;
  display: inline-block;
  transition:all 1s ease;
}

.inner {
  height:100%;
  background-color: red;
  transition:all 1s ease;
}
.outer:hover {background-color: gold; border-radius:50%; text-align:center;}
.outer:hover .inner {background-color: blue; border-radius:50%;}
.outer:hover .inner::after {
  content: 'да ну нихера себе';
  display: block;
  margin-top:20px; color:#fff;
}