Dock Themes

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