JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label><input type="checkbox" id="checkBoxColorRed" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" id="checkBoxColorGreen" name="colorCheckbox" value="green"> green</label>
            <label><input type="checkbox" id="checkBoxColorBlue" name="colorCheckbox" value="blue"> blue</label>
                </div>
            <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
            <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
            <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

CSS

.box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }

JavaScript

$(document).ready(function(){
    if(getCookie("checkBoxColorRed").localeCompare("true") == 0) {
        $("#checkBoxColorRed").prop('checked', true);
        $(".red").toggle();
    }
    if(getCookie("checkBoxColorGreen").localeCompare("true") == 0) {
        $("#checkBoxColorGreen").prop('checked', true);
        $(".green").toggle();
    }
    if(getCookie("checkBoxColorBlue").localeCompare("true") == 0) {
        $("#checkBoxColorBlue").prop('checked', true);
        $(".blue").toggle();
    }
    
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".red").toggle();
            deleteOrCreateCookie("checkBoxColorRed");
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle();
            deleteOrCreateCookie("checkBoxColorGreen");
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle();
            deleteOrCreateCookie("checkBoxColorBlue");
        }
    });
});

function getTimeString() {
    var d = new Date();
    d.setTime(d.getTime() + (1*24*60*60*1000));
    return "expires="+d.toUTCString();
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
} 

function deleteOrCreateCookie(name) {
    if ($("#"+name).prop('checked')) {
        document.cookie = name + "=true; " + getTimeString();
    }
    else
    {
        document.cookie = name +"=; -1";
    }
}