JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="hexagon">rrr</div>

CSS

body{
			padding: 100px;
		}
		.hexagon {
			position: relative;
			width: 81px;
			height: 173.21px;
      line-height: 173.21px;
			background-color: #64C7CC;
			margin: 86.60px 0;
      
		}

		.hexagon:before{
			content: "";
			position: absolute;
			width: 0;
			top: 0;
			bottom: 0;
            left: 100%;
			border-left: 58.6px solid #64C7CC;
			border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
		}

		.hexagon:after {
			content: "";
			position: absolute;
			width: 0;
			top: 0;
			bottom: 0;
			right: 100%;
			border-right: 58.60px solid #64C7CC;
			border-bottom: 50px solid transparent;
			border-top: 50px solid transparent;
		}