Laptop Device Mockup

<!--
  Day 105: Laptop Device Mockup

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

<!-- Laptop Device Mockup -->
<div class="relative mx-auto max-w-2xl px-10">
  <!-- Screen -->
  <div class="relative overflow-hidden rounded-t-3xl bg-zinc-950 p-3">
    <!-- Camera Notch -->
    <div class="absolute inset-x-0 top-0 flex items-center justify-center">
      <div
        class="flex h-6 w-20 items-center justify-center rounded-b-md bg-zinc-950"
      >
        <div
          class="size-1.25 rounded-full bg-zinc-800 ring-2 ring-zinc-700/75"
        ></div>
      </div>
    </div>
    <!-- END Camera Notch -->

    <!-- Keyboard glow -->
    <div class="absolute inset-x-10 bottom-0 h-2 bg-white blur-xl"></div>

    <!-- Screen Content -->
    <div
      class="aspect-[16/10] w-full overflow-hidden rounded-t-2xl bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500"
    >
      <img
        src="https://images.unsplash.com/photo-1513346940221-6f673d962e97?q=80&w=1170&auto=format&fit=crop"
        alt="Laptop Screen"
        class="aspect-16/10 w-full object-cover"
      />
    </div>
    <!-- END Screen Content -->
  </div>
  <!-- END Screen -->

  <!-- Base -->
  <div class="-mx-10 pb-1">
    <div
      class="relative h-4 w-full rounded-b-2xl bg-linear-to-r from-zinc-800 via-zinc-950 to-zinc-800"
    >
      <div class="absolute inset-0 flex items-start justify-center">
        <div
          class="h-1.75 w-20 rounded-b-md border-x border-b border-zinc-600/25 bg-linear-to-r from-zinc-800 via-zinc-700 to-zinc-800 opacity-75"
        ></div>
      </div>
      <div
        class="absolute -bottom-1 left-8 h-1 w-10 rounded-b-full bg-zinc-900"
      ></div>
      <div
        class="absolute right-8 -bottom-1 h-1 w-10 rounded-b-full bg-zinc-900"
      ></div>
    </div>
  </div>
  <!-- END Base -->
</div>
<!-- END Laptop Device Mockup -->