Tailwind Contact Panel with Action Links

<div id="contact" class="lg:col-span-5 xl:col-span-4 ring-1 ring-white/10 bg-white/5 rounded-3xl pt-6 pr-6 pb-6 pl-6">
              <h2 class="text-2xl tracking-tight text-white font-geist font-light" style="">Contact</h2>
              <p class="mt-3 text-slate-300/90 text-sm font-geist">Tell me about your product, goals, and timeline. I’ll reply with next steps.</p>
              <div class="mt-4 space-y-2">
                <a href="mailto:hello@averytan.design" class="flex items-center justify-between rounded-2xl bg-black/30 px-4 py-3 ring-1 ring-white/10 hover:bg-black/40 transition">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail text-white/90"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
                    </span>
                    <div class="">
                      <p class="text-sm text-white font-geist">Email</p>
                      <p class="text-xs text-slate-300/80 font-geist">hello@averytan.design</p>
                    </div>
                  </div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right text-white/70"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                </a>
                <a href="https://cal.com" class="flex items-center justify-between rounded-2xl bg-black/30 px-4 py-3 ring-1 ring-white/10 hover:bg-black/40 transition">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar text-white/90"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                    </span>
                    <div class="">
                      <p class="text-sm text-white font-geist">Book intro call</p>
                      <p class="text-xs text-slate-300/80 font-geist">15 minutes • Zoom</p>
                    </div>
                  </div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right text-white/70"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                </a>
                <a href="https://www.linkedin.com" class="flex items-center justify-between rounded-2xl bg-black/30 px-4 py-3 ring-1 ring-white/10 hover:bg-black/40 transition">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin text-white/90"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                    </span>
                    <div>
                      <p class="text-sm text-white font-geist">LinkedIn</p>
                      <p class="text-xs text-slate-300/80 font-geist">Connect professionally</p>
                    </div>
                  </div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right text-white/70"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                </a>
              </div>
            </div>