JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hexagone">
  <div>
   <h1> a title </h1>
   <p>some text</p>
  </div>
</div>

<div class="hexagone" style="color:green">
  <div>
   <h1> a title </h1>
   <p>some text</p>
  </div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

CSS

div[class] {
  display:inline-block;
  width:200px;
  color:red;
  margin:20px;
  filter:url(#round);
  position:relative;
}
.hexagone::before {
   content:"";
   display:block;
   padding-top:86.6%;
   background:currentColor;
  transition:1s all;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
div[class] div {
  position:absolute;
  text-align:center;
  color:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
div[class]:hover::before {
   background:blue;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);
}