JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body style="background-color:#299">
    <ol>
      <li class='hex'>
      </li>
    </ol>
  </body>

</html>

SCSS

.hex {
  background:chartreuse;
	position: relative;
	width: 4em;
	height: 6.2em;
 	border-radius: 10px;
	display: inline-block;
	top: 0;
	&:before,
	&:after {
		position: absolute;
		width: inherit;
		height: inherit;
		border-radius: inherit;
		background: inherit;
		content: "";
	}
	&:before {
		transform: rotate(60deg);
	}
	&:after {
		transform: rotate(-60deg);
	}
}