Drive HUD Dashboard

<div class="min-h-screen antialiased font-inter items-center flex">
  <main class="mx-auto max-w-6xl px-4 py-8">
    <section class="relative overflow-hidden rounded-3xl bg-white/5 shadow-xl ring-1 ring-white/10 backdrop-blur">
      <div class="pointer-events-none absolute inset-0 opacity-70">
        <div class="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-gradient-to-br from-slate-800/40 to-slate-900/40 blur-2xl"></div>
        <div class="absolute -right-24 -bottom-24 h-80 w-80 rounded-full bg-gradient-to-tr from-slate-800/40 to-slate-900/40 blur-2xl"></div>
      </div>
      <header class="relative z-10 flex items-center justify-between px-6 pt-6">
        <div class="flex items-center gap-3">
          <span class="text-xl tracking-tight text-slate-100 font-semibold">P D R N</span>
        </div>
        <div class="flex items-center gap-6 text-slate-300">
          <div class="text-sm">16:45</div>
          <div class="flex items-center gap-2">
            <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" class="h-5 w-5">
              <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
            </svg>
            <span class="text-sm">29°C</span>
          </div>
        </div>
      </header>
      <div class="relative z-10 grid grid-cols-1 gap-6 px-6 pb-6 pt-4 md:grid-cols-3 md:gap-8 md:pt-2">
        <div class="flex flex-col justify-center">
          <div class="flex items-end gap-3">
            <div class="text-[88px] leading-none tracking-tight text-slate-100 font-semibold">68</div>
            <div class="pb-3 text-slate-400">
              <div class="text-lg">km/h</div>
            </div>
          </div>
          <div class="mt-8 flex items-center gap-3">
            <div class="h-2 w-40 overflow-hidden rounded-full bg-slate-800 ring-1 ring-white/5">
              <div class="h-full w-2/5 rounded-full bg-gradient-to-r from-emerald-400 via-teal-400 to-sky-400"></div>
            </div>
            <div class="text-sm text-slate-300">287 km</div>
          </div>
        </div>
        <div class="flex flex-col items-start justify-center md:items-center">
          <div class="flex items-center gap-3">
            <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" class="h-7 w-7 text-slate-100">
              <path d="m12 19-7-7 7-7"></path>
              <path d="M19 12H5"></path>
            </svg>
            <h2 class="text-4xl tracking-tight text-slate-100 font-semibold">2.1 km</h2>
          </div>
          <p class="mt-1 text-lg text-slate-400">Market Street</p>
          <div class="mt-8 w-full max-w-md">
            <div class="mx-auto h-28 w-full overflow-hidden rounded-2xl bg-gradient-to-b from-slate-900 to-slate-800 ring-1 ring-white/10">
              <div class="relative h-full w-full">
                <div class="absolute left-1/2 top-0 h-full w-1.5 -translate-x-1/2 bg-white/80 shadow-[0_0_12px_rgba(255,255,255,0.25)]"></div>
                <div class="absolute left-[45%] top-0 h-full w-1 bg-white/20"></div>
                <div class="absolute right-[45%] top-0 h-full w-1 bg-white/20"></div>
                <div class="absolute bottom-2 left-1/2 h-6 w-16 -translate-x-1/2 rotate-3 rounded-full bg-rose-400/20 blur-md"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-start md:justify-end">
          <div class="flex items-center gap-4">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=256&auto=format&fit=crop" alt="Album Art" class="h-20 w-20 rounded-xl object-cover ring-1 ring-white/10">
            </div>
            <div class="min-w-[14rem]">
              <div class="text-xl tracking-tight text-slate-100">Midnight Drive</div>
              <div class="mt-0.5 text-sm text-slate-400">Aiko Tanaka • Album: Night Lines</div>
              <div class="mt-3">
                <div class="flex items-center justify-between text-[11px] text-slate-400">
                  <span class="tabular-nums">1:42</span>
                  <span class="tabular-nums">3:58</span>
                </div>
                <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-800 ring-1 ring-white/5">
                  <div class="h-full w-2/3 rounded-full bg-gradient-to-r from-indigo-400 via-sky-400 to-cyan-400"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="relative z-10 px-6 pb-6">
        <div class="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
        <div class="mt-4 flex items-center justify-between text-sm text-slate-300">
          <div class="flex items-center gap-2">
            <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" class="h-4 w-4">
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
            <span>Next turn in 2.1 km</span>
          </div>
          <div class="flex items-center gap-3">
            <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" class="h-4 w-4">
              <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg>
            <span>Market Street, Downtown</span>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>