Social Media Profile

<!--
  Day 92: Social Media Profile

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

<!-- Social Media Profile -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-8 ring-1 ring-zinc-200/50">
    <div class="flex flex-col items-center gap-6">
      <!-- Profile Header -->
      <div class="relative">
        <!-- Profile Image -->
        <div class="relative">
          <img
            src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=256&auto=format&fit=crop"
            alt="Profile Picture"
            class="size-28 rounded-full border-4 border-white object-cover shadow-lg"
          />

          <!-- Status Indicator -->
          <div
            class="absolute right-1 bottom-1 size-6 rounded-full border-4 border-white bg-emerald-500"
          ></div>
          <!-- END Status Indicator -->
        </div>
        <!-- END Profile Image -->
      </div>
      <!-- END Profile Header -->

      <!-- Profile Info -->
      <div class="text-center">
        <h1 class="text-2xl font-bold text-zinc-900">John Rodriguez</h1>
        <p class="text-zinc-600">@john_rodriguez</p>
        <p class="mt-2 max-w-md text-sm/relaxed text-zinc-600">
          Founder of web design daily. Building indie projects on my free time.
          Let's connect!
        </p>
      </div>
      <!-- END Profile Info -->

      <hr
        class="h-px w-full border-0 bg-linear-to-r from-transparent via-zinc-200 to-transparent"
      />

      <!-- Stats -->
      <div class="flex items-center gap-4 text-center sm:gap-12">
        <dl>
          <dt class="text-2xl font-extrabold text-zinc-950">2.4k</dt>
          <dd class="text-sm text-zinc-600">Posts</dd>
        </dl>
        <dl>
          <dt class="text-2xl font-extrabold text-zinc-950">48.2k</dt>
          <dd class="text-sm text-zinc-600">Followers</dd>
        </dl>
        <dl>
          <dt class="text-2xl font-extrabold text-zinc-950">1.2k</dt>
          <dd class="text-sm text-zinc-600">Following</dd>
        </dl>
      </div>
      <!-- END Stats -->

      <hr
        class="h-px w-full border-0 bg-linear-to-r from-transparent via-zinc-200 to-transparent"
      />

      <!-- Action Buttons -->
      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
        <button
          type="button"
          class="flex items-center justify-center gap-2 rounded-lg border border-indigo-600 bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:border-indigo-700 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2 focus:outline-none active:border-indigo-800 active:bg-indigo-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-plus inline-block size-4"
          >
            <path
              d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
            />
          </svg>
          <span>Follow</span>
        </button>
        <button
          type="button"
          class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-6 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-chat-bubble-bottom-center inline-block size-4"
          >
            <path
              d="M1 8.74c0 .983.713 1.825 1.69 1.943.904.108 1.817.19 2.737.243.363.02.688.231.85.556l1.052 2.103a.75.75 0 0 0 1.342 0l1.052-2.103c.162-.325.487-.535.85-.556.92-.053 1.833-.134 2.738-.243.976-.118 1.689-.96 1.689-1.942V4.259c0-.982-.713-1.824-1.69-1.942a44.45 44.45 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482Z"
            />
          </svg>
          <span>Message</span>
        </button>
      </div>
      <!-- END Action Buttons -->
    </div>
  </div>
</div>
<!-- END Social Media Profile -->