Tailwind Bottom Nav Bar with Floating Action Button

<nav
  class="absolute inset-x-0 bottom-0 z-50 transition duration-500 ease-out motion-reduce:transition-none opacity-100 blur-none translate-y-0"
  style="">
  <div class="relative bg-white/5 ring-white/10 ring-1 rounded-3xl mr-4 mb-4 ml-4 pt-3 pr-4 pb-3 pl-4 backdrop-blur">
    <div class="flex text-[11px] text-slate-300 items-center justify-between">
      <button data-nav="dashboard" class="flex w-1/5 flex-col items-center gap-1 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none text-slate-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard h-5 w-5"><rect width="7" height="9" x="3" y="3" rx="1" class=""></rect><rect width="7" height="5" x="14" y="3" rx="1" class=""></rect><rect width="7" height="9" x="14" y="12" rx="1" class=""></rect><rect width="7" height="5" x="3" y="16" rx="1" class=""></rect></svg>
      <span class="">Dashboard</span>
    </button>
      <button data-nav="content" class="flex w-1/5 flex-col items-center gap-1 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none text-slate-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text" class="lucide lucide-file-text h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
      <span class="">Content</span>
    </button>

      <!-- Floating Center Button -->
      <div class="relative -mt-10 w-1/5">
        <button data-nav="insights" class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-b from-violet-400 to-violet-600 text-white shadow-[0_10px_30px_rgba(139,92,246,0.5)] ring-2 ring-white/10 hover:ring-violet-400/40 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="line-chart" class="lucide lucide-line-chart h-6 w-6"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="m19 9-5 5-4-4-3 3" class=""></path></svg>
      </button>
        <div class="text-[11px] font-medium text-slate-200 text-center mt-1">Insights</div>
      </div>

      <button data-nav="revenue" class="flex w-1/5 flex-col items-center gap-1 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none text-slate-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="dollar-sign" class="lucide lucide-dollar-sign h-5 w-5"><line x1="12" x2="12" y1="2" y2="22" class=""></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path></svg>
      <span>Revenue</span>
    </button>
      <button data-nav="community" class="flex w-1/5 flex-col items-center gap-1 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none text-slate-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
      <span>Community</span>
    </button>
    </div>
  </div>
</nav>