JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<label>
            <input type="checkbox" name="" value="" checked/>
            <svg class = "my-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="17"
            height="16" viewBox="0 0 17 16">
            <path d="M8.500,0.000 L11.301,5.028 L16.999,6.112 L13.033,10.302 L13.753,16.000 L8.500,13.561 L3.247,16.000 L3.967,10.302 L0.001,6.112 L5.699,5.028 L8.500,0.000"
            class="cls-1" />
            </svg>

        </label>

CSS

svg input:checked  {
            fill:yellow;
        }

        .my-image:hover {
            background-color:green;
            fill:red;
        }
        
        input[type="checkbox"]:checked + .my-image {
            fill:red;
        }