JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hexagone" style="--s:100px;"></div>
<div class="hexagone" style="--s:200px;"></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-flex;
  width:var(--s);
  height:calc(var(--s)*0.866);
  color:red;
  margin:20px;
  filter:url(#round);
}
.hexagone::before {
   content:"";
   width:100%;
   background:currentColor;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}