JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br>
<div id="hexagon-circle"></div>

CSS

#hexagon-circle { 
    position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: red;
transition: opacity .5s;
cursor: pointer;} 

#hexagon-circle:before { 
    position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(60deg);  /* IE 9 */
          transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */

#hexagon-circle:after { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(-60deg);  /* IE 9 */
          transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */}