Simple Vertical Navigation

<!--
  Day 28: Simple vertical navigation

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Vertical Navigation -->
<div
  class="relative mx-auto w-full max-w-64 rounded-lg bg-white p-6 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
  <nav class="flex flex-col">
    <h3
      class="wider pb-2 text-xs font-medium tracking-wider text-slate-400 uppercase"
    >
      Welcome
    </h3>
    <a
      href="javascript:void(0)"
      class="border-l-2 border-rose-600 px-3.5 py-1.5 text-sm font-semibold text-slate-950"
      >Dashboard</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Statistics</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Customers</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Sales</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Earnings</a
    >
    <h3
      class="wider pt-5 pb-2 text-xs font-medium tracking-wider text-slate-400 uppercase"
    >
      Services
    </h3>
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Web Hosting</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Domain Registration</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Seo Packages</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Server Management</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >CDN Hosting</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Email Marketing</a
    >
    <h3
      class="wider pt-5 pb-2 text-xs font-medium tracking-wider text-slate-400 uppercase"
    >
      Account
    </h3>
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Profile</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Invoices</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Settings</a
    >
    <a
      href="javascript:void(0)"
      class="border-l-2 border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
      >Logout</a
    >
  </nav>
</div>
<!-- END Vertical Navigation -->