JSFiddle - React, Tailwind, and code Playground

HTML

Use case: A responsive colored hexagon grid.

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

.main {
  display:flex;
  --s: 100px;  /* size  */
  --m: 4px;    /* space */
  --r: calc(var(--s)*3*1.1547/2 + 4*var(--m)  - 2px);
}

.container {
  font-size: 0; /*disable white space between inline block element */
  position:relative;
  padding-bottom:100px;
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); /*  = 1/cos(30)  */
  display: inline-block;
  font-size:initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: red;
  margin-bottom: calc(var(--m) - var(--s)*0.2885); /* = tan(30)/2 */
}
.container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,red,pink,yellow,blue,purple);
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: repeating-linear-gradient(     
                   transparent 0 calc(var(--r) - 3px),      
                   #fff        0 var(--r));
}

body {
  background:grey;
}