Form: Checkbox

<div class="mb-6">
    <fieldset class="space-y-6">
        <legend class="font-bold">Checkbox selection label</legend>

        <div class="relative flex items-start">
            <div class="flex items-center h-6">
                <input id="option-1" name="options" type="checkbox" class="h-8 w-8 text-blue border-dark/40 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
            </div>
            <div class="ml-3">
                <label for="option-1" class="">Option 1</label>
            </div>
        </div>
        <div class="relative flex items-start">
            <div class="flex items-center h-6">
                <input id="option-2" name="options" type="checkbox" class="h-8 w-8 text-blue border-dark/40 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
            </div>
            <div class="ml-3">
                <label for="option-2" class="">Option 2</label>
            </div>
        </div>
        <div class="relative flex items-start">
            <div class="flex items-center h-6">
                <input id="option-3" name="options" type="checkbox" class="h-8 w-8 text-blue border-red-600 rounded cursor-pointer focus:outline-none focus:ring-1 focus:ring-red-500 focus:shadow-lg focus:border-red-500">
            </div>
            <div class="ml-3">
                <label for="option-3" class="">Option 3</label>
                <p class="mt-1 text-sm text-red-600" id="email-error">Error message</p>
            </div>
        </div>
    </fieldset>
</div>