Toggle Basic

                    <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">Basic Toggle</h3>
      <div class="flex items-center">
        <label class="inline-flex items-center cursor-pointer">
          <input type="checkbox" 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>
      </div>
    </div>

    <!-- 带标签的开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Toggle with Label</h3>
      <div class="flex items-center">
        <label class="inline-flex items-center cursor-pointer">
          <input type="checkbox" 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>
          <span class="ml-3 text-sm font-medium text-gray-900">Enable notifications</span>
        </label>
      </div>
      <div class="flex items-center">
        <label class="inline-flex items-center cursor-pointer">
          <span class="mr-3 text-sm font-medium text-gray-900">Dark mode</span>
          <input type="checkbox" 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>
      </div>
    </div>

    <!-- 带描述的开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Toggle with Description</h3>
      <div class="flex items-start">
        <div class="flex items-center h-5">
          <label class="inline-flex items-center cursor-pointer">
            <input type="checkbox" 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>
        </div>
        <div class="ml-3 text-sm">
          <label class="font-medium text-gray-900">Email updates</label>
          <p class="text-gray-500">Get notified when new features are released</p>
        </div>
      </div>
    </div>

    <!-- 在表单组中的开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Toggle in Form Group</h3>
      <fieldset class="border border-gray-300 rounded-lg p-4">
        <legend class="text-sm font-medium text-gray-700 px-2">Privacy settings</legend>
        <div class="space-y-3">
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <label class="inline-flex items-center cursor-pointer">
                <input type="checkbox" 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>
            </div>
            <div class="ml-3 text-sm">
              <label class="font-medium text-gray-900">Remember me</label>
              <p class="text-gray-500">Stay signed in on this device</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <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>
            </div>
            <div class="ml-3 text-sm">
              <label class="font-medium text-gray-900">Usage data</label>
              <p class="text-gray-500">Allow us to collect anonymous usage data</p>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</section>