JSFiddle - React, Tailwind, and code Playground

by jblanche

HTML

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>test SVG bg</title>
</head>
<body>
  <div id="foo">
  </div>
    
  <div id="bar">
     <svg>
        <g transform='scale(5)'>
            <path d="M26,4v2.047c0,2.211-1.789,4-4,4s-4-1.789-4-4V4h-4v2.047c0,2.211-1.789,4-4,4s-4-1.789-4-4V4H0v28
        h32V4H26z M10,28H6v-4h4V28z M10,20H6v-4h4V20z M18,28h-4v-4h4V28z M18,20.008h-4v-4h4V20.008z M22,28v-4h4L22,28z M26,20h-4v-4h4
        V20z"/>
            <path d="M8,6V2c0-1.104,0.895-2,2-2s2,0.896,2,2v4c0,1.104-0.895,2-2,2S8,7.104,8,6z"/>
            <path d="M20,6V2c0-1.104,0.895-2,2-2s2,0.896,2,2v4c0,1.104-0.895,2-2,2S20,7.104,20,6z"/>
        </g>
    </svg>
  </div>
</body>

CSS

#foo{
    height: 200px;
    width: 200px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNDMzNjMpICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojMjMxRjIwOyIgZD0iTTI2LDR2Mi4wNDdjMCwyLjIxMS0xLjc4OSw0LTQsNHMtNC0xLjc4OS00LTRWNGgtNHYyLjA0N2MwLDIuMjExLTEuNzg5LDQtNCw0cy00LTEuNzg5LTQtNFY0SDB2MjgNCgkJaDMyVjRIMjZ6IE0xMCwyOEg2di00aDRWMjh6IE0xMCwyMEg2di00aDRWMjB6IE0xOCwyOGgtNHYtNGg0VjI4eiBNMTgsMjAuMDA4aC00di00aDRWMjAuMDA4eiBNMjIsMjh2LTRoNEwyMiwyOHogTTI2LDIwaC00di00aDQNCgkJVjIweiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMzFGMjA7IiBkPSJNOCw2VjJjMC0xLjEwNCwwLjg5NS0yLDItMnMyLDAuODk2LDIsMnY0YzAsMS4xMDQtMC44OTUsMi0yLDJTOCw3LjEwNCw4LDZ6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzIzMUYyMDsiIGQ9Ik0yMCw2VjJjMC0xLjEwNCwwLjg5NS0yLDItMnMyLDAuODk2LDIsMnY0YzAsMS4xMDQtMC44OTUsMi0yLDJTMjAsNy4xMDQsMjAsNnoiLz4NCjwvZz4NCjwvc3ZnPg0K');
    background-repeat: no-repeat;
    background-size: 160px;
    fill: #green;
    -webkit-svg-shadow: 1px 1px 1px #333; /*Does not work */
}

#foo:after{
    content: "Can I change the fill color of this SVG ? After base64 encoding it ?";
    position: absolute;
    top: 10px;
    width: 200px;
    left: 200px;
}


#bar g{
    fill: #4D3636;
    -webkit-svg-shadow: 1px 1px 1px #333; /* only for webkit based browsers of course */
}


#bar:after{
    content: "I want all these styling in the CSS example !";
    position: absolute;
    top: 210px;
    width:...