JSFiddle - React, Tailwind, and code Playground

HTML

Not working with gradient
<div class = 'withgradiant item'></div> <!-- not working with gradient :( -->

Working but no gradient<br>
<div class = 'withoutgradiant item'></div> <!-- working but no gradient :( -->

I want this gradient for my class: <br>
 <svg width="72" height="72" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"><linearGradient x1="0" y1="0" x2="100%" y2="100%" id="gradient"><stop stop-color="#c86dd7" offset="0"/><stop stop-color="#3023ae" offset="100%"/></linearGradient><circle fill="url(#gradient)" cx="36" cy="36" r="20"/></svg>

CSS

.withgradiant {
    background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='xMinYMin meet'> <linearGradient x1='0' y1='0' x2='100%' y2='100%' id='gradient'><stop stop-color='#c86dd7' offset='0'/><stop stop-color='#3023ae' offset='100%'/></linearGradient><circle fill='url(#gradient)' cx='250' cy='250' r='240'/></svg>");
    height:100px;
    width:100px;

}

.withoutgradiant {
    background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='xMinYMin meet'><circle cx='250' cy='250' r='240' fill='red'/></svg>");
    height:100px;
    width:100px;

}