Toggle Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- 颜色示例 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Toggle Colors</h3>
      <div class="space-y-6">
        <!-- 默认颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-600"></div>
          </label>
          <span class="text-sm text-gray-700">Default</span>
        </div>

        <!-- 主要颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
          <span class="text-sm text-blue-700">Primary</span>
        </div>

        <!-- 次要颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
          </label>
          <span class="text-sm text-purple-700">Secondary</span>
        </div>

        <!-- 成功颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
          </label>
          <span class="text-sm text-green-700">Success</span>
        </div>

        <!-- 警告颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-yellow-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-yellow-500"></div>
          </label>
          <span class="text-sm text-yellow-700">Warning</span>
        </div>

        <!-- 错误颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
          </label>
          <span class="text-sm text-red-700">Error</span>
        </div>

        <!-- 信息颜色 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-600"></div>
          </label>
          <span class="text-sm text-sky-700">Info</span>
        </div>
      </div>
    </div>

    <!-- 自定义颜色 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Custom Colors</h3>
      <div class="space-y-6">
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-indigo-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-indigo-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
          </label>
          <span class="text-sm text-indigo-700">Indigo</span>
        </div>

        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-amber-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-amber-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
          </label>
          <span class="text-sm text-amber-700">Amber</span>
        </div>

        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-emerald-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-emerald-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
          </label>
          <span class="text-sm text-emerald-700">Emerald</span>
        </div>

        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-rose-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-rose-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-500"></div>
          </label>
          <span class="text-sm text-rose-700">Rose</span>
        </div>
      </div>
    </div>
  </div>
</section>