Tailwind CSS Dock Components

                            <!-- Default Theme -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Default Theme</h2>
  <div class="dock bg-white border border-gray-200 rounded-xl shadow-sm p-2 max-w-xs mx-auto 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>
      </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>
      </svg>
      <span class="dock-label text-xs font-medium">Feed</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">Call</span>
    </button>
  </div>
</div>

<!-- Dark Theme -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Dark Theme</h2>
  <div class="dock bg-gray-800 border border-gray-700 rounded-xl shadow-md p-2 max-w-xs mx-auto text-gray-200 flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-1 hover:text-white">
      <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>
      </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-400">
      <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>
      </svg>
      <span class="dock-label text-xs font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-1 hover:text-white">
      <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">Call</span>
    </button>
  </div>
</div>

<!-- Primary Color Theme -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Primary Color Theme</h2>
  <div class="dock bg-blue-600 rounded-xl shadow-md p-2 max-w-xs mx-auto text-white flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-1 opacity-80 hover:opacity-100">
      <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>
      </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 opacity-100">
      <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>
      </svg>
      <span class="dock-label text-xs font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-1 opacity-80 hover:opacity-100">
      <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">Call</span>
    </button>
  </div>
</div>

<!-- Glass/Frosted Theme -->
<div>
  <h2 class="text-lg font-semibold mb-2">Glass/Frosted Theme</h2>
  <div class="dock backdrop-blur-md bg-white/70 dark:bg-gray-900/70 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-2 max-w-xs mx-auto flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-1 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
      <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>
      </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-600 dark:text-blue-400">
      <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>
      </svg>
      <span class="dock-label text-xs font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-1 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
      <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">Call</span>
    </button>
  </div>
</div>
                        

                            <!-- Extra Small Dock -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Extra Small Dock (dock-xs)</h2>
  <div class="dock dock-xs bg-white border border-gray-200 rounded-xl shadow-sm p-2 max-w-xs mx-auto flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-0.5">
      <svg class="w-3 h-3" 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>
      </svg>
      <span class="dock-label text-[10px] font-medium">Home</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-0.5 dock-active text-blue-500">
      <svg class="w-3 h-3" 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>
      </svg>
      <span class="dock-label text-[10px] font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-0.5">
      <svg class="w-3 h-3" 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-[10px] font-medium">Call</span>
    </button>
  </div>
</div>

<!-- Small Dock -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Small Dock (dock-sm)</h2>
  <div class="dock dock-sm bg-white border border-gray-200 rounded-xl shadow-sm p-2 max-w-xs mx-auto flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-0.5">
      <svg class="w-4 h-4" 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>
      </svg>
      <span class="dock-label text-[11px] font-medium">Home</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-0.5 dock-active text-blue-500">
      <svg class="w-4 h-4" 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>
      </svg>
      <span class="dock-label text-[11px] font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-0.5">
      <svg class="w-4 h-4" 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-[11px] font-medium">Call</span>
    </button>
  </div>
</div>

<!-- Medium Dock (Default) -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Medium Dock (dock-md - Default)</h2>
  <div class="dock dock-md bg-white border border-gray-200 rounded-xl shadow-sm p-2 max-w-xs mx-auto 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>
      </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>
      </svg>
      <span class="dock-label text-xs font-medium">Feed</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">Call</span>
    </button>
  </div>
</div>

<!-- Large Dock -->
<div class="mb-12">
  <h2 class="text-lg font-semibold mb-2">Large Dock (dock-lg)</h2>
  <div class="dock dock-lg bg-white border border-gray-200 rounded-xl shadow-sm p-2 max-w-sm mx-auto flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-1">
      <svg class="w-6 h-6" 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>
      </svg>
      <span class="dock-label text-sm font-medium">Home</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-1 dock-active text-blue-500">
      <svg class="w-6 h-6" 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>
      </svg>
      <span class="dock-label text-sm font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-1">
      <svg class="w-6 h-6" 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-sm font-medium">Call</span>
    </button>
  </div>
</div>

<!-- Extra Large Dock -->
<div>
  <h2 class="text-lg font-semibold mb-2">Extra Large Dock (dock-xl)</h2>
  <div class="dock dock-xl bg-white border border-gray-200 rounded-xl shadow-sm p-3 max-w-md mx-auto flex flex-row justify-around">
    <button class="flex flex-col items-center justify-center gap-2">
      <svg class="w-8 h-8" 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>
      </svg>
      <span class="dock-label text-base font-medium">Home</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-2 dock-active text-blue-500">
      <svg class="w-8 h-8" 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>
      </svg>
      <span class="dock-label text-base font-medium">Feed</span>
    </button>
    
    <button class="flex flex-col items-center justify-center gap-2">
      <svg class="w-8 h-8" 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-base font-medium">Call</span>
    </button>
  </div>
</div>
                        

                            <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>