Tailwind CSS Drawer Components

                            <section class="bg-white p-4">
  <div class="relative w-full">
    <input id="my-drawer-right" type="checkbox" class="sr-only peer">
    <div class="w-full transition-all duration-300">
      <!-- 页面内容 -->
      <div class="w-full max-w-4xl mx-auto p-4">
        <div class="flex justify-between items-center mb-6">
          <h1 class="text-2xl font-bold">Right Side Drawer</h1>
          <label for="my-drawer-right" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
            Open Right Drawer
          </label>
        </div>
        
        <div class="prose">
          <p class="text-gray-600">
            This drawer opens from the right side of the screen instead of the left. This pattern is useful for notifications, details panels, or supplementary controls that don't need to dominate the main navigation flow.
          </p>
          <div class="mt-6 bg-gray-50 rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Content Example</h3>
            <div class="space-y-4">
              <p class="text-gray-600">
                The right drawer pattern is commonly used for:
              </p>
              <ul class="list-disc pl-5 space-y-2 text-gray-600">
                <li>Notification centers</li>
                <li>User profile quick access</li>
                <li>Shopping carts in e-commerce</li>
                <li>Document or item details</li>
                <li>Secondary settings or controls</li>
              </ul>
              <p class="text-gray-600">
                Click the button above to see the drawer in action.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Overlay background when drawer is open -->
    <label for="my-drawer-right" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block cursor-pointer"></label>
    
    <!-- Right drawer sidebar -->
    <div class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-300 peer-checked:translate-x-0">
      <div class="p-4">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-semibold">Notifications</h2>
          <label for="my-drawer-right" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        
        <div class="border-b pb-4 mb-4">
          <div class="flex items-center justify-between text-sm">
            <span class="font-medium text-gray-800">Recent Notifications</span>
            <span class="text-blue-600 cursor-pointer hover:underline">Mark all as read</span>
          </div>
        </div>
        
        <div class="space-y-4">
          <div class="flex gap-3 p-3 rounded-lg bg-blue-50 border border-blue-100">
            <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">New message from Alex</p>
              <p class="text-xs text-gray-500 mt-1">Hey there! Just checking in about the project...</p>
              <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
            </div>
          </div>
          
          <div class="flex gap-3 p-3 rounded-lg border border-gray-200">
            <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 text-green-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Task completed</p>
              <p class="text-xs text-gray-500 mt-1">Your task "Update documentation" has been marked complete.</p>
              <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
            </div>
          </div>
          
          <div class="flex gap-3 p-3 rounded-lg border border-gray-200">
            <div class="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0 text-yellow-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Meeting reminder</p>
              <p class="text-xs text-gray-500 mt-1">Team standup in 30 minutes in the main meeting room.</p>
              <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
            </div>
          </div>
          
          <div class="flex gap-3 p-3 rounded-lg border border-gray-200">
            <div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 text-purple-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">System update</p>
              <p class="text-xs text-gray-500 mt-1">The system will be updated tonight at 2:00 AM. Estimated downtime: 15 minutes.</p>
              <p class="text-xs text-gray-400 mt-1">Yesterday</p>
            </div>
          </div>
        </div>
        
        <div class="mt-6 pt-4 border-t border-gray-200">
          <button class="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium rounded-md">
            View all notifications
          </button>
        </div>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="bg-white min-h-screen">
  <div class="relative w-full">
    <input id="my-drawer-2" type="checkbox" class="sr-only peer">
    
    <!-- Main content -->
    <div class="w-full lg:ml-80 transition-all duration-300">
      <div class="p-6">
        <div class="lg:hidden mb-6">
          <label for="my-drawer-2" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
            Open Menu
          </label>
        </div>
        
        <div class="max-w-4xl">
          <h1 class="text-2xl font-bold">Dashboard Overview</h1>
          <p class="text-gray-600 mt-2">
            Welcome to your dashboard! This is a responsive drawer layout that automatically stays open on large screens.
          </p>
          
          <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
              <h3 class="font-medium text-gray-800 mb-2">Recent Activity</h3>
              <ul class="space-y-3">
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                  <span>Project "Alpha" completed</span>
                  <span class="ml-auto text-gray-400">2h ago</span>
                </li>
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                  <span>New comment on "Beta" task</span>
                  <span class="ml-auto text-gray-400">5h ago</span>
                </li>
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                  <span>Timer updated for "Gamma" project</span>
                  <span class="ml-auto text-gray-400">Yesterday</span>
                </li>
              </ul>
            </div>
            
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
              <h3 class="font-medium text-gray-800 mb-2">Performance</h3>
              <div class="space-y-4">
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>Task Completion</span>
                    <span>78%</span>
                  </div>
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-2 bg-blue-600 rounded-full w-[78%]"></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>Project Progress</span>
                    <span>62%</span>
                  </div>
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-2 bg-green-500 rounded-full w-[62%]"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Overlay background - for mobile -->
    <label for="my-drawer-2" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block lg:hidden cursor-pointer"></label>
    
    <!-- Sidebar -->
    <div class="fixed top-0 left-0 h-full w-80 bg-white shadow-xl z-50 transform -translate-x-full transition-transform duration-300 peer-checked:translate-x-0 lg:translate-x-0">
      <div class="p-6 h-full flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <div class="bg-blue-600 text-white p-2 rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
              </svg>
            </div>
            <h1 class="text-xl font-bold ml-2">AppDash</h1>
          </div>
          <label for="my-drawer-2" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer lg:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        
        <!-- Navigation -->
        <nav class="flex-grow">
          <p class="text-xs uppercase tracking-wider text-gray-500 mb-2">Main Menu</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md bg-blue-50 text-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                Dashboard
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                Profile
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                Projects
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                Calendar
              </a>
            </li>
          </ul>
          
          <p class="text-xs uppercase tracking-wider text-gray-500 mt-6 mb-2">Settings</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Settings
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                </svg>
                Logout
              </a>
            </li>
          </ul>
        </nav>
        
        <!-- Footer -->
        <div class="mt-auto pt-4 border-t border-gray-200">
          <div class="flex items-center">
            <div class="h-8 w-8 rounded-full bg-gray-300 flex-shrink-0"></div>
            <div class="ml-3">
              <p class="text-sm font-medium">John Smith</p>
              <p class="text-xs text-gray-500">Admin</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="bg-white p-4">
  <div class="relative w-full">
    <input id="my-drawer-bottom" type="checkbox" class="sr-only peer">
    
    <!-- 主要内容 -->
    <div class="w-full transition-all duration-300">
      <div class="max-w-md mx-auto">
        <div class="mb-8">
          <h1 class="text-2xl font-bold text-gray-900 mb-2">Bottom Drawer</h1>
          <p class="text-gray-600">
            This component demonstrates a drawer that slides up from the bottom of the screen. 
            It's commonly used for mobile interfaces, action sheets, or contextual controls.
          </p>
        </div>
        
        <div class="space-y-6">
          <div class="bg-blue-50 border border-blue-100 p-4 rounded-lg">
            <h3 class="font-medium text-blue-800 mb-2">Common Use Cases</h3>
            <ul class="text-sm text-blue-700 space-y-1 pl-5 list-disc">
              <li>Mobile navigation menus</li>
              <li>Selection/filter interfaces</li>
              <li>Action sheets and quick options</li>
              <li>Media players or playback controls</li>
              <li>Additional context for the current view</li>
            </ul>
          </div>
          
          <label for="my-drawer-bottom" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md inline-flex items-center justify-center cursor-pointer">
            Open Bottom Drawer
          </label>
          
          <div class="mt-8">
            <h3 class="text-lg font-medium text-gray-800 mb-4">Example Demo</h3>
            <p class="text-gray-600 mb-3">
              Click the button above to see the bottom drawer in action. This pattern is particularly useful 
              on mobile devices where screen space is limited and ergonomics favor interactions near 
              the bottom of the screen.
            </p>
            <p class="text-gray-600">
              Bottom drawers can have different heights based on their content and can sometimes 
              be draggable to allow users to adjust how much content is visible.
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 背景遮罩 -->
    <label for="my-drawer-bottom" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block cursor-pointer"></label>
    
    <!-- 底部抽屉 -->
    <div class="fixed inset-x-0 bottom-0 h-auto max-h-[85vh] bg-white rounded-t-xl shadow-xl z-50 transform translate-y-full transition-transform duration-300 peer-checked:translate-y-0 overflow-auto">
      <div class="p-5">
        <!-- 把手/拉环 -->
        <div class="flex justify-center mb-5">
          <div class="w-10 h-1 bg-gray-300 rounded-full"></div>
        </div>
        
        <!-- 抽屉标题 -->
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-semibold text-gray-900">Select an Option</h2>
          <label for="my-drawer-bottom" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        
        <!-- 抽屉内容 -->
        <div class="space-y-3 mb-6">
          <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
            <div class="bg-blue-100 text-blue-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <div class="text-left">
              <p class="font-medium">Upload Photo</p>
              <p class="text-xs text-gray-500">Share a new photo with your followers</p>
            </div>
          </button>
          
          <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
            <div class="bg-purple-100 text-purple-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </div>
            <div class="text-left">
              <p class="font-medium">Record Video</p>
              <p class="text-xs text-gray-500">Capture and share a video moment</p>
            </div>
          </button>
          
          <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
            <div class="bg-green-100 text-green-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <div class="text-left">
              <p class="font-medium">Create Document</p>
              <p class="text-xs text-gray-500">Start a new document or note</p>
            </div>
          </button>
          
          <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
            <div class="bg-yellow-100 text-yellow-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <div class="text-left">
              <p class="font-medium">Schedule Event</p>
              <p class="text-xs text-gray-500">Add a new event to your calendar</p>
            </div>
          </button>
        </div>
        
        <label for="my-drawer-bottom" class="block w-full px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 text-center font-medium rounded-md cursor-pointer">
          Cancel
        </label>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="bg-white p-4">
  <div class="relative w-full">
    <input id="my-drawer" type="checkbox" class="sr-only peer">
    <div class="w-full transition-all duration-300">
      <!-- 页面内容 -->
      <div class="w-full max-w-4xl mx-auto p-4">
        <label for="my-drawer" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 cursor-pointer mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          Open Drawer
        </label>
        <div>
          <h1 class="text-2xl font-bold">Main Content</h1>
          <p class="text-gray-600 mt-2">
            This is the main content area. Click the button above to open the sidebar drawer.
          </p>
          <p class="text-gray-600 mt-2">
            The drawer pattern is useful for navigation menus, filters, or any interface that needs to be toggled on and off.
          </p>
        </div>
      </div>
    </div>
    
    <!-- Overlay background when drawer is open -->
    <label for="my-drawer" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block cursor-pointer"></label>
    
    <!-- Drawer sidebar -->
    <div class="fixed top-0 left-0 h-full w-80 bg-white shadow-lg z-50 transform -translate-x-full transition-transform duration-300 peer-checked:translate-x-0">
      <div class="p-4">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-semibold">Sidebar Menu</h2>
          <label for="my-drawer" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        <ul class="bg-gray-100 rounded-lg p-2 space-y-1 w-full">
          <li><a class="block px-4 py-2 rounded-md bg-blue-600 text-white cursor-pointer">Dashboard</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Profile</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Settings</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Messages</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Analytics</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>