JSFiddle - React, Tailwind, and code Playground

by MiguelR

HTML

<svg>
   <linearGradient id="g323" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="0%" y2="0%">
      <stop stop-color="#9A60C4" offset="0"/><stop stop-color="#9C6BC2 " offset="0.05"/>
        <stop stop-color="#9A60C4" offset="0.05"/><stop stop-color="#9C6BC2 " offset="0.10"/>
        <stop stop-color="#9A60C4" offset="0.10"/><stop stop-color="#9C6BC2 " offset="0.15"/>
        <stop stop-color="#9A60C4" offset="0.15"/><stop stop-color="#9C6BC2 " offset="0.20"/>
        <stop stop-color="#9A60C4" offset="0.20"/><stop stop-color="#9C6BC2 " offset="0.25"/>
        <stop stop-color="#9A60C4" offset="0.15"/><stop stop-color="#9C6BC2 " offset="0.20"/>
         <stop stop-color="#9A60C4" offset="0.25"/><stop stop-color="#9C6BC2 " offset="0.30"/>
        <stop stop-color="#9A60C4" offset="0.30"/><stop stop-color="#9C6BC2 " offset="0.35"/>
        <stop stop-color="#9A60C4" offset="0.35"/><stop stop-color="#9C6BC2 " offset="0.40"/>
        <stop stop-color="#9A60C4" offset="0.40"/><stop stop-color="#9C6BC2 " offset="0.45"/>
         <stop stop-color="#9A60C4" offset="0.45"/><stop stop-color="#9C6BC2 " offset="0.50"/>
        <stop stop-color="#9A60C4" offset="0.50"/><stop stop-color="#9C6BC2 " offset="0.55"/>
        <stop stop-color="#9A60C4" offset="0.55"/><stop stop-color="#9C6BC2 " offset="0.60"/>
        <stop stop-color="#9A60C4" offset="0.60"/><stop stop-color="#9C6BC2 " offset="0.65"/>
         <stop stop-color="#9A60C4" offset="0.65"/><stop stop-color="#9C6BC2 " offset="0.70"/>
         <stop stop-color="#9A60C4" offset="0.70"/><stop stop-color="#9C6BC2 " offset="0.75"/>
         <stop stop-color="#9A60C4" offset="0.75"/><stop stop-color="#9C6BC2 " offset="0.80"/>
         <stop stop-color="#9A60C4" offset="0.80"/><stop stop-color="#9C6BC2 " offset="0.85"/>
         <stop stop-color="#9A60C4" offset="0.85"/><stop stop-color="#9C6BC2 " offset="0.90"/>
         <stop stop-color="#9A60C4" offset="0.90"/><stop stop-color="#9C6BC2 " offset="0.95"/>
        ...

CSS

svg {
    width: 138px;
height: 102px;
background: blue;
}
.undefined{
    stroke: #B39AC6;
stroke-width: 2;
    opacity: 0.5;
}
.smba{
stroke: #000000;
stroke-width: 5;
    opacity: 0.02;
}
.smba1{
opacity: 0.15;
} 
div{
font-family: Tahoma, sans-serif;
font-size: 16px;
color: #4E2A67;
text-shadow: 1px 1px #B5B5B5;
position: absolute;
top: 35px;
left: 37px;
}
.div{
    width: 242px;
height: 140px;
    position: relative;
margin-top: -106px;
margin-left: 150px;
    
}
.div {
background-color: #9E61C5;
background-size: 10px 10px;
background-image: -webkit-linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4), -webkit-linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4);
background-image: -moz-linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4), -moz-linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4);
background-image: -ms-linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4), -ms-linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4);
background-image: -o-linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4), -o-linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4);
background-image: linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4), linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4);
-pie-background: linear-gradient(45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4) 0 0 / 60px, linear-gradient(-45deg, #9A60C4 25%, transparent 25%, transparent 75%, #9A60C4 75%, #9A60C4) 0 0 / 60px, #eee;
behavior: url(/PIE.htc);
}