JSFiddle - React, Tailwind, and code Playground

by rvagg

HTML

<ul>
    <li class="pass">Yay for me!</li>
    <li class="pass">Super yays for me!</li>
    <li class="fail">Oh noes...</li>
    <li class="death">Supertastic fail</li>
    <li class="troll">Whazzup trolls?</li>
</ul>

CSS

li.pass {
    /* BASE64 Encoded */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIGhlaWdodD0iMjUiIHdpZHRoPSIyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoOTEsIDE4MywgOTEpIiBkPSJNMi4zNzksMTQuNzI5TDUuMjA4LDExLjg5OUwxMi45NTgsMTkuNjQ4TDI1Ljg3Nyw2LjczM0wyOC43MDcsOS41NjFMMTIuOTU4LDI1LjMwOFoiLz48L3N2Zz4KCg");
    /* Unencoded */
    -x-background-image: url("data:image/svg+xml,<svg viewBox='0 0 40 40' height='25' width='25' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(91, 183, 91)' d='M2.379,14.729L5.208,11.899L12.958,19.648L25.877,6.733L28.707,9.561L12.958,25.308Z'/></svg>")
}
li.fail {
    /* URI (%) Encoded */
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2040%2040\'%20height%3D\'25\'%20width%3D\'25\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%3E%3Cpath%20fill%3D\'rgb(218%2C%2079%2C%2073)\'%20d%3D\'M24.778%2C21.419%2019.276%2C15.917%2024.777%2C10.415%2021.949%2C7.585%2016.447%2C13.087%2010.945%2C7.585%208.117%2C10.415%2013.618%2C15.917%208.116%2C21.419%2010.946%2C24.248%2016.447%2C18.746%2021.948%2C24.248z\'%2F%3E%3C%2Fsvg%3E");
    /* Unencoded */
    -x-background-image: url("data:image/svg+xml,<svg viewBox='0 0 40 40' height='25' width='25' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(218, 79, 73)' d='M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z'/></svg>");
}
li.death {
    /* Unencoded */
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 40 40' height='25' width='25' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(218, 79, 73)'...