JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"type="text/javascript"></script>

<h1>Cookies on [name of service]</h2>
  <form id="consentForm">
      <fieldset class="input_fieldset" id="input_fieldset_analytics">
        <legend class="legend">Analytics Cookies</legend>
        <div class="radios_items analytic_options">
          <div class="radios_item">
            <input
              class="radios_input"
              type="radio"
              name="analytics"
              value="true"
              id="analytics-accept"
            />
            <label class="input_label" for="analytics-accept"> Yes </label>
          </div>
          <div class="radios_item">
            <input
              class="radios_input"
              type="radio"
              name="analytics"
              value="false"
              id="analytics-reject"
            />
            <label class="input_label" for="analytics-reject"> No </label>
          </div>
        </div>
      </fieldset>

      <button type="submit" class="submit_button">Submit</button>
    </form>

CSS

h1 {
        font-size: 2.25rem;
        line-height: 1;
        color: #0b0c0c;
        font-family: arial, sans-serif;
        font-weight: 700;
      }
      legend {
        display: block;
        padding-inline: 2px;
      }

      div {
        display: block;
      }

      .radios_item {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-bottom: 10px;
      }

      .legend {
        font-weight: 700;
        font-family: arial, sans-serif;
        font-size: 1.1875rem;
        line-height: 1.3157894737;
        color: #0b0c0c;
        box-sizing: border-box;
        display: table;
        max-width: 100%;
        margin-bottom: 10px;
        padding: 0;
        white-space: normal;
      }

      .input_fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .input_label {
        font-family: arial, sans-serif;
        font-weight: 400;
        font-size: 1.1875rem;
        line-height: 1.3157894737;
        color: #0b0c0c;
        display: block;
        margin-bottom: 5px;
        align-self: center;
        max-width: calc(100% - 74px);
        padding: 7px 15px;
        cursor: pointer;
      }

      .radios_input {
        width: 44px;
        height: 44px;
        margin: 0;
        cursor: pointer;
        accent-color: #0b0c0c;
      }

      .submit_button {
        font-family: arial, sans-serif;
        font-weight: 400;
        font-size: 1.1875rem;
        line-height: 1;
        box-sizing: border-box;
        display: inline-block;
        position: relative;
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 22px;
        padding: 8px 10px 7px;
        border: 2px solid rgba(0, 0, 0, 0);
        border-radius: 0;
        color: #fff;
        background-color: #0e1a2e;
        box-shadow: 0 2px 0 #0a1220;
       ...

JavaScript

// Cookie Control configuration that mirrors categories defined in html
var config = {
    apiKey: '592b99ebdf88c091dad9b556b6d8de236ac97687',
    product: 'PRO_MULTISITE',
    initialState: 'closed',
    branding: {removeIcon: true},
    onLoad: function () {
          // target form
          const consentForm = document.getElementById("consentForm");
          // use getCategoryConsent method from Cookie Control to determine current value of first category in array
          const currentAnalyticsConsent =
            CookieControl.getCategoryConsent(0) || false;
          // target input with matching value to category
          const matchingAnalyticsInputElement = consentForm.querySelector(
            "div.radios_items.analytic_options input[value=" +
              currentAnalyticsConsent +
              "]"
          );
          // set targetted input checked
          matchingAnalyticsInputElement.setAttribute("checked", true);
        },
    optionalCookies: [
        // first category in array
        {
            name : 'analytics',
            label: 'Analytics Cookies',
            description: 'Analytics cookies help us to improve our website by collecting and reporting information on its usage.',
            onAccept : function(){
                console.log('analytics accepted')
            },
            onRevoke: function(){
                console.log('analytics revoked')
            }
        }
    ],

};
CookieControl.load( config );

// form handler to associate the form with desired consent changes
document.getElementById("consentForm").addEventListener("submit", function (event) {
    event.preventDefault(); // stop form submitting to a backend
    const analyticsChoice = document.querySelector('input[name="analytics"]:checked')?.value;
    console.log('Submitting form, analytics value:', analyticsChoice);
    // connect with cookie control
    CookieControl.changeCategory(0, analyticsChoice...