Drawer Right
<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>
Copied to clipboard