JSFiddle - React, Tailwind, and code Playground

HTML

Use: a responsive bubble chat having a gradient (or random coloration). Hover to see the magic
<br>
<div class="bubble">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus accumsan urna, vel rhoncus libero ornare vitae. , </p>
  <i></i>
</div>

<div class="bubble">
  <p>Lorem ipsum dolor sit amet,  </p>
  <i></i>
</div>

<div class="bubble" style="--h:50px;width:350px;">
  <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus accumsan urna, vel rhoncus libero ornare vitae.   </p>
  <i></i>
</div>

CSS

.bubble {
  --h:30px;
  margin:20px;
  position:relative;
  display:inline-flex;
  width:200px;
  flex-direction:column;
}
.bubble p{
  border-radius:20px;
  padding:20px;
  margin:0;
  background:linear-gradient(-45deg,lightyellow,orange,lightblue) 0 0/100% calc(100% + var(--h));
}

.bubble i {
  width:30px;
  height:var(--h);
  margin-left:30px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:0.5s;
}
.bubble i::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(-45deg,lightyellow,orange,lightblue);
}
.bubble:hover i {
  margin-left:40%;
  width:100px;
  clip-path:polygon(30% 0,100% 0,0% 100%);
}


body {
  background:pink;
}