JSFiddle - React, Tailwind, and code Playground

by krustnic

HTML

<div id="svg"></div>
<div id="base64"></div>
<input id="checkbox" type="checkbox">

CSS

#checkbox {
  -webkit-appearance: none;
  opacity: 0;
}

div {
  width:20px;
  height:20px;
}

#svg {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.64' fill-rule='evenodd' clip-rule='evenodd' d='M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z' fill='%23FFDE5A'/%3E%3Cg opacity='0.92'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.5547 2.16806C20.0143 2.47441 20.1384 3.09528 19.8321 3.55481L10.8321 14.5548C10.6551 14.8203 10.3621 14.9853 10.0434 14.9992C9.72466 15.013 9.41846 14.8739 9.21917 14.6248L5.21917 9.6248C4.87416 9.19354 4.94408 8.56425 5.37534 8.21924C5.8066 7.87423 6.4359 7.94415 6.78091 8.37541L9.92658 12.3075L18.168 2.44541C18.4743 1.98588 19.0952 1.8617 19.5547 2.16806Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}

#base64 {
  background-image:...