Toggle Button

<div class=" flex justify-center items-center gap-2 my-2 bg-gray-200 rounded-full p-1 ">
                <div class="w-1/4">
                    <input type="radio" id="gemini" name="aiPlatform" value="gemini" class="peer sr-only" checked />
                    <label for="gemini"
                        class="block cursor-pointer select-none rounded-full p-2 text-center peer-checked:bg-indigo-600 peer-checked:font-bold peer-checked:text-white transition-colors duration-300">
                        Gemini
                    </label>
                </div>
                <div class="w-1/4">
                    <input type="radio" id="grok" name="aiPlatform" value="grok" class="peer sr-only" />
                    <label for="grok"
                        class="block cursor-pointer select-none rounded-full p-2 text-center peer-checked:bg-indigo-600 peer-checked:font-bold peer-checked:text-white transition-colors duration-300">Grok</label>
                </div>
                <div class="w-1/4">
                    <input type="radio" id="chatgpt" name="aiPlatform" value="chatgpt" class="peer sr-only" />
                    <label for="chatgpt"
                        class="block cursor-pointer select-none rounded-full p-2 text-center peer-checked:bg-indigo-600 peer-checked:font-bold peer-checked:text-white transition-colors duration-300">ChatGPT</label>
                </div>
                <div class="w-1/4">
                    <input type="radio" id="claude" name="aiPlatform" value="claude" class="peer sr-only" />
                    <label for="claude"
                        class="block cursor-pointer select-none rounded-full p-2 text-center peer-checked:bg-indigo-600 peer-checked:font-bold peer-checked:text-white transition-colors duration-300">Claude</label>
                </div>
            </div>