JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<div class="container">
<ul>
    <li>
        <span>
            <div class="hexagon"> </div>
        </span>
        <span>
            <div class="hexagon"> </div>
        </span>
        <span>
            <div class="hexagon"> </div>
        </span>
    </li>
    <li> 
        <span>
            <div class="hexagon"> </div>
        </span>
         <span>
            <div class="hexagon"> </div>
        </span>
    </li>
    <li>
        <span>
            <div class="hexagon"> </div>
        </span>
        <span>
            <div class="hexagon"> </div>
        </span>
        <span>
            <div class="hexagon"> </div>
        </span>
    </li>
</ul>
</div>

CSS

li {}
li:nth-child(odd) {}
li:nth-child(even) span:first-child {
        line-height: 129px;
        display: inline-block;
        position: relative;
        margin-bottom: 25px;
        margin-left: 52px;
        margin-top: -20px;
}

    .container {
        padding-top: 80px;
        width: 65%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .container span {
        line-height: 129px;
        display: inline-block;
        position: relative;
        margin-bottom: 25px;
    }
    .container span.odd {
        line-height: 129px;
        display: inline-block;
        position: relative;
        margin-bottom: 25px;
        margin-left: 52px;
        margin-top: -20px;
    }
    
    .container .hex {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.hexagon { width: 100px; height: 55px; background: red; position: relative; } .hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } .hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }