JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg width="500" height="500">
    <g>
        <g transform="scale(2,2)translate(-200,-300)">
            <path class="front draw" d="m 278.86358,335.82901 21.66316,-7.60461 0.10274,44.60325 32.94195,-14.22445 0,29.83041 -33.21429,14.28571 0,102.14286 -20.71428,8.21429 0,-101.78572 -32.85715,13.57143 -0.75761,-29.49492 33.06635,-13.65437 z" />
            <!-- Tops -->
            <path class="top fade" d="m 268.8382,331.18397 22.64421,-8.20423 8.39286,4.46429 -21.43383,7.58184 z"  />
            <path class="top fade left-side" d="m 267.67267,377.84342 -31.51785,13.57142 10.26785,3.75 31.69644,-13.125 z"/>
            <path class="top fade right-side" d="m 300.80684,364.70772 23.4375,-10.04465 8.57143,3.21429 -32.09822,13.97321 z" />     
            <!-- Sides -->
            <path class="side fade top-side" d="m 278.00136,335.55481 -10.0325,-3.77878 0.17857,45.33547 10.05138,3.97005 z" />
            <path class="side fade bottom-side" d="m 269.75997,416.50957 -0.1046,92.89676 9.24239,3.78063 -0.12627,-100.75389 z" />
            <path class="side fade bar-side" d="m 235.52982,392.17311 -0.17857,27.94642 10.44642,4.82143 -0.62499,-29.28572 z" />
            
        </g>
    </g>
</svg>

CSS

.front {
    stroke: #f8981d;
    stroke-width: 1px;
    fill: none;
}

.top {
    stroke: #E2851B;
    fill: #E2851B;
}

.side {
    stroke: #D37F19;
    fill: #D37F19;
}