Dock Sizes

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