JSFiddle - React, Tailwind, and code Playground

hexagons

by Csaba Hellinger

HTML

<div class="hex-container">
    <div class="hex">    
    </div>
</div>

CSS

body, html {
    margin: 0;
}

.hex-container {
    width: 100%;
    height: 480px;
    background-color: pink;
    padding: 10px;
}

.hex {
  position: relative;
  width: 50px; 
  height: 28.87px;
  background-color: #78c100;
  margin: 14.43px 0;
}

.hex:before,
.hex:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.hex:before {
  bottom: 100%;
  border-bottom: 14.43px solid #78c100;
}

.hex:after {
  top: 100%;
  width: 0;
  border-top: 14.43px solid #78c100;
}

.hex, .hex:after, .hex:before {
    box-shadow: 50px 0 0 black;
}

JavaScript

// 1920x480