JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shape"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices facilisis enim, nec sodales neque imperdiet nec. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed mauris dignissim, varius lacus vel, dictum arcu. Fusce venenatis tortor purus, eu efficitur mauris condimentum et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus aliquam dolor, eu feugiat tortor viverra quis. Morbi non ullamcorper quam. Morbi ut purus et felis suscipit laoreet. Pellentesque convallis laoreet nunc sed porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; </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

.shape {
  color:red;
  margin:20px auto;
  color:#fff;
  padding:30px;
  max-width:600px;
  background:red;
  clip-path: polygon(0 0, 50% 20px,100% 0,calc(100% - 20px) 50%,100% 100%,50% calc(100% - 20px),0 100%,20px 50%);
  filter:url(#round);
}