JSFiddle - React, Tailwind, and code Playground

by LordGuard

HTML

<svg viewBox="0 0 512 512" height="48px" overflow="visible">
              <mask id="logo-mask">
                <rect fill="white" class="st0" width="512" height="480"/>
                <linearGradient id="logo-mask-gradient" gradientUnits="userSpaceOnUse" x1="256" y1="608" x2="256" y2="480">
                  <stop  offset="0" style="stop-color:#000000"/>
                  <stop  offset="1" style="stop-color:#FFFFFF"/>
                </linearGradient>
                <rect fill="url(#logo-mask-gradient)" y="480" class="st1" width="512" height="128"/>
              </mask>
              <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="109.9333" y1="1022.9948" x2="407.9231" y2="506.8616" gradientTransform="matrix(1 0 0 -1 0 1010)">
                <stop offset="0" style="stop-color:#00D1FF"/>
                <stop offset="0.1663" style="stop-color:#2FD1FD"/>
                <stop offset="0.5429" style="stop-color:#A6D1F7"/>
                <stop offset="0.5916" style="stop-color:#B6D1F6"/>
                <stop offset="1" style="stop-color:#FFB9D6"/>
              </linearGradient>
              <path
                mask="url(#logo-mask)"
                fill="url(#SVGID_1_)"
                d="M32,320c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0C32,343.3,32,328.7,32,320z M32,416 c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0C32,439.3,32,424.7,32,416z M32,672c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32 c-9.7,0-22.3,0-32,0C32,695.3,32,680.7,32,672z M32,1280c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0 C32,1303.3,32,1288.7,32,1280z M32,2176c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0C32,2199.3,32,2184.7,32,2176z M64,352c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0C64,375.3,64,360.7,64,352z M64,448c9.7,0,22.3,0,32,0 c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0C64,471.3,64,456.7,64,448z M64,992c9.7,0,22.3,0,32,0c0,8.7,0,23.3,0,32c-9.7,0-22.3,0-32,0 C64,1015.3,64,1000.7,64,992z...