JSFiddle - React, Tailwind, and code Playground

HTML

<div class="back">
    <svg width="100%" height="100%">
        <defs>
            <linearGradient id="grayfall" x1="0" x2="0" y1="0" y2="2" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#789"/>
                <stop offset="100" stop-color="#123"/>
            </linearGradient>
            <linearGradient id="graytop" x1="0" x2="0" y1="-0.5" y2="3" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#789"/>
                <stop offset="100" stop-color="#123"/>
            </linearGradient>
            <linearGradient id="graybottom" x1="0" x2="0" y1="0.5" y2="4" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#789"/>
                <stop offset="100" stop-color="#123"/>
            </linearGradient>
            <pattern id="hexafill" x="0" y="0" width="92" height="52.4" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
                <path d="M0,0 L28,0 L14,24.2 L0,24.2z M64,0 L92,0 L92,24.2 L78,24.2z"  fill="url(#graytop)"/>
                <path d="M32,2 L60,2 L74,26.2 L60,50.4 L32,50.4 L18,26.2z" fill="url(#grayfall)"/>         
                <path d="M0,28.2 L14,28.2 L28,52.4 L0,52.4z M78,28.2 L92,28.2 L92,52.4 L64,52.4z" fill="url(#graybottom)"/>
                <path d="M28,0 L14,24.2 L0,24.2 M92,24.2 L78,24.2 M74,26.2 L60,50.4 L32,50.4" stroke="#000" fill="none" stroke-opacity="0.5"/>
                <path d="M18,26.2 L32,2 L60,2 M64,52.4 L78,28.2 L92,28.2 M0,28.2 L14,28.2" stroke="#fff" fill="none" stroke-opacity="0.5"/>
                
            </pattern>
        </defs>
        <rect fill="url(#hexafill)" x="0" y="0" width="700" height="300"/>
    </svg>
</div>

CSS

.back {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    background-color: black;
}