JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<div class="checkbox-image checked"></div>
<input type="checkbox" checked="checked" title="" value="1" name="Opt" id="Opt">
<label for="Opt_InOut">I authorise blah and it's partners to call me on my mobile in order to assist me with my car purchase.</label>
</form>

CSS

.checkbox-image {
    background: blue;
    float: left;
    height: 20px;
    margin: 0 10px 40px 0;
    width: 21px;
}
.checkbox-image.checked {
    background: red;
    float: left;
    height: 20px;
    margin: 0 10px 40px 0;
    width: 21px;
}

JavaScript

$(document).ready(function() {
    
    var checkbox = $('input[type="checkbox"]');
    var checkimage = $('<div class="checkbox-image" />');
    
    $(checkbox).each(function(){
        $(this).show().before(checkimage);
    });
    
    $(checkbox).prop('checked',function() {
        $('.checkbox-image').addClass('checked');
    });
    
    $('checkbox-image').on('click',function(){
        $(this).toggleClass('checked').after().prop('checked',$(this).is('.checked'));
	}); 


});