Bradley Kirton's Blog

<div class="flex flex-col gap-5">
    <div class="flex flex-row gap-2 items-center">
        <input id="custom-checkbox" type="checkbox" class="hidden peer"/>
        <label
            for="custom-checkbox"
            class="
            h-6 w-6
            flex items-center justify-center
            border-2 border-lime-300 rounded
            peer-checked:bg-lime-500"
        >
            <svg
                class="text-white"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <circle cx="12" cy="12" r="8"></circle>
                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                <line x1="15" y1="9" x2="15.01" y2="9"></line>
            </svg>
        </label>
        <p>Click me</p>
    </div>
</div>