JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<span class="test a1"></span>
<span class="test a2"></span>
<span class="test a3"></span>
<span class="test a4"></span>
<span class="test a5"></span>
<span class="test a6"></span>

CSS

.test {
	display: inline-block;
	width: 40px;
	height: 40px;
}
.a1 {
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="40" height="40" fill="rgba(51,102,204,1)"/></svg>');
}
.a2 {
	background:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0\" y=\"0\" width=\"40\" height=\"40\" fill=\"rgba(51,204,153,1)\"/></svg>");
}
.a3 {
	background:url(data:image/svg+xml;utf8,<svg\ xmlns=\"http://www.w3.org/2000/svg\"><rect\ x=\"0\"\ y=\"0\"\ width=\"40\"\ height=\"40\"\ fill=\"rgba\(204,51,102,1\)\"/></svg>);
}
.a4 {
	background:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><rect x=\'0\' y=\'0\' width=\'40\' height=\'40\' fill=\'rgba(51,204,255,1)\'/></svg>');
}
.a5 {
	background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0icmdiYSgyMDQsNTEsMjU1LDEpIi8+PC9zdmc+);
}
.a6 {
	background:url(data:\ image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0icmdiYSgxNTMsMjA0LDEwMiwxKSIvPjwvc3ZnPg==);
}