<div>
    <div class="mb-3">
        <div class="relative inline-block w-10 mr-2 align-middle select-none">
            <input type="checkbox" name="toggle" id="Blue" class="checked:bg-blue-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                <label for="Blue" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                </label>
            </div>
            <span class="text-gray-400 font-medium">
                Blue
            </span>
        </div>
        <div class="mb-3">
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
                <input type="checkbox" name="toggle" id="Pink" class="checked:bg-pink-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                    <label for="Pink" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                    </label>
                </div>
                <span class="text-gray-400 font-medium">
                    Pink
                </span>
            </div>
            <div class="mb-3">
                <div class="relative inline-block w-10 mr-2 align-middle select-none">
                    <input type="checkbox" name="toggle" id="Green" class="checked:bg-green-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                        <label for="Green" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                        </label>
                    </div>
                    <span class="text-gray-400 font-medium">
                        Green
                    </span>
                </div>
                <div class="mb-3">
                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                        <input type="checkbox" name="toggle" id="Orange" class="checked:bg-yellow-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                            <label for="Orange" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                            </label>
                        </div>
                        <span class="text-gray-400 font-medium">
                            Orange
                        </span>
                    </div>
                    <div class="mb-3">
                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
                            <input type="checkbox" name="toggle" id="Purple" class="checked:bg-purple-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                <label for="Purple" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                </label>
                            </div>
                            <span class="text-gray-400 font-medium">
                                Purple
                            </span>
                        </div>
                        <div class="mb-3">
                            <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                <input type="checkbox" name="toggle" id="Black" class="checked:bg-black outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                    <label for="Black" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                    </label>
                                </div>
                                <span class="text-gray-400 font-medium">
                                    Black
                                </span>
                            </div>
                            <div class="mb-3">
                                <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                    <input type="checkbox" name="toggle" id="Indigo" class="checked:bg-indigo-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                        <label for="Indigo" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                        </label>
                                    </div>
                                    <span class="text-gray-400 font-medium">
                                        Indigo
                                    </span>
                                </div>
                                <div class="mb-3">
                                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                        <input type="checkbox" name="toggle" id="Red" class="checked:bg-red-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                            <label for="Red" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                            </label>
                                        </div>
                                        <span class="text-gray-400 font-medium">
                                            Red
                                        </span>
                                    </div>
                                    <div class="mb-3">
                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                            <input type="checkbox" name="toggle" id="Gray" class="checked:bg-gray-500 outline-none focus:outline-none right-4 checked:right-0 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                                                <label for="Gray" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                                </label>
                                            </div>
                                            <span class="text-gray-400 font-medium">
                                                Gray
                                            </span>
                                        </div>
                                    </div>