Toggle Sizes

                    <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 Sizes</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-7 h-4 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-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
          <span class="text-sm text-gray-700">Extra Small</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-9 h-5 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-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
          <span class="text-sm text-gray-700">Small</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-gray-700">Medium (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-14 h-7 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-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
          <span class="text-sm text-gray-700">Large</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-16 h-8 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-7 after:w-7 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
          <span class="text-sm text-gray-700">Extra Large</span>
        </div>
      </div>
    </div>
    
    <!-- 响应式尺寸 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Responsive Toggle</h3>
      <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-9 h-5 sm:w-11 sm:h-6 md:w-14 md:h-7 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-4 after:w-4 sm:after:h-5 sm:after:w-5 md:after:h-6 md:after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
        </label>
        <span class="text-sm text-gray-700">Responsive size based on screen width</span>
      </div>
    </div>
  </div>
</section>