Dock Basic

                    <div class="dock bg-white border-t border-gray-200 shadow-md fixed bottom-0 left-0 right-0 px-4 py-2 flex flex-row justify-around">
  <button class="flex flex-col items-center justify-center gap-1">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
    <span class="dock-label text-xs font-medium">Home</span>
  </button>
  
  <button class="flex flex-col items-center justify-center gap-1 dock-active text-blue-500">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
      <line x1="8" y1="21" x2="16" y2="21"></line>
      <line x1="12" y1="17" x2="12" y2="21"></line>
    </svg>
    <span class="dock-label text-xs font-medium">Explore</span>
  </button>
  
  <button class="flex flex-col items-center justify-center gap-1">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
    </svg>
    <span class="dock-label text-xs font-medium">Contact</span>
  </button>
  
  <button class="flex flex-col items-center justify-center gap-1">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
    <span class="dock-label text-xs font-medium">Profile</span>
  </button>
</div>

<!-- Page content -->
<div class="max-w-md mx-auto p-4 mb-20">
  <div class="text-center mb-8">
    <h1 class="text-2xl font-bold mb-2">Dock Navigation</h1>
    <p class="text-gray-600">Bottom navigation component fixed to the screen</p>
  </div>
  
  <div class="bg-gray-100 p-4 rounded-lg mb-4">
    <p class="text-sm text-gray-600">The Dock (Bottom navigation) is a common navigation pattern in mobile applications, providing quick access to main features.</p>
  </div>
  
  <div class="space-y-4">
    <p>Scroll this content to see the fixed navigation bar at the bottom.</p>
    <div class="h-32 bg-gray-100 rounded-lg"></div>
    <div class="h-32 bg-gray-100 rounded-lg"></div>
    <div class="h-32 bg-gray-100 rounded-lg"></div>
  </div>
</div>