JSFiddle - React, Tailwind, and code Playground

by gentooboontoo

HTML

<div>
<svg>
    <defs>
        <radialGradient id="circleGradient" gradientUnits="userSpaceOnUse"
                      cx="25" cy="25" r="15">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </radialGradient>
        <radialGradient id="triangleGradient" gradientUnits="userSpaceOnUse"
                      cx="75" cy="25" r="15">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </radialGradient>
    </defs>
    <circle cx="25" cy="25" r="15" fill="url(#circleGradient)" />
    <path d="M 50 0 L 100 0 L 75 50 z" fill="url(#triangleGradient)"/>
</svg>
</div>
<div>
<svg>
    <defs>
        <radialGradient id="circleGradient" gradientUnits="userSpaceOnUse"
                      cx="25" cy="25" r="15">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="green" />
      </radialGradient>
        <radialGradient id="triangleGradient" gradientUnits="userSpaceOnUse"
                      cx="75" cy="25" r="15">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="green" />
        </radialGradient>
    </defs>
    <circle cx="25" cy="25" r="15" fill="url(#circleGradient)" />
    <path d="M 50 0 L 100 0 L 75 50 z" fill="url(#triangleGradient)"/>
</svg>
</div>

CSS

div {
    height: 50px;
}