JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<svg viewbox="0 0 150 150">

        <defs>

            <linearGradient id="gradient">

                <stop class="stop1" offset="0%"/>
                <stop class="stop2" offset="50%"/>
                <stop class="stop3" offset="50%"/>

            </linearGradient>

        </defs>

        <polygon id="polygon" fill="#E34C26" stroke="#E34C26" stroke-width="5" points="10 10, 90 10, 85 95, 50 105, 15 95"/>

    </svg>

CSS

#polygon {
  fill: url(#gradient)
}

.stop1,
.stop2 {
  stop-color: #E34C26
}

.stop3 {
  stop-color: #F06529
}