Tengo el siguiente código que usa tailwindcss para alternar y AlpineJS para agregar una base de cookies en el estado de alternar (activar/desactivar).

Pero parece que no puedo hacer que funcione.

Aquí está el codepen: https://codepen.io/williamharvey/pen/GRMBqzO

Cualquier ayuda o dirección será apreciada

Gracias

Y aquí está el código.

 <div class="flex w-full items-center bg-gray-100 border-b border-gray-200 px-5 py-3 text-sm" x-data="{ cookieConcent1: docCookies.getItem('cookieConcent1') === 'true'} " x-init="$watch('!cookieConcent1', val => docCookies.setItem('cookieConcent1', val))" x-bind:class="{ 'cookieConcent1': cookieConcent1 }"> <div class="flex-1"> <p>Strictly necessary cookies</p> </div> <div class="w-10 text-right"> <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 bg-gray-200" x-data="{ on: true }" role="switch" aria-checked="false" :aria-checked="on.toString()" @click="on = !on;cookieConcent1 = !cookieConcent1" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-green-400': on, 'bg-gray-200': !(on) } "> <span class="sr-only">Use setting</span> <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) } "></span> </button> </div> </div>