Mobile Device Mockup

<!--
  Day 27: Mobile 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
-->

<!-- Device -->
<div class="relative mx-auto aspect-[9/19.5] w-72 lg:w-80">
  <!-- Notch -->
  <div
    class="absolute top-[3.5%] left-1/2 z-10 -ml-[13%] flex h-[4%] w-[26%] items-center justify-end gap-1 rounded-full bg-slate-900 px-2"
  >
    <div class="size-2 rounded-full bg-slate-500/25"></div>
  </div>
  <!-- END Notch -->

  <!-- Left Buttons -->
  <div
    class="absolute top-[15%] -left-1 h-[4%] w-1 rounded-l-lg bg-slate-900"
  ></div>
  <div
    class="absolute top-[24%] -left-1 h-[8%] w-1 rounded-l-lg bg-slate-900"
  ></div>
  <div
    class="absolute top-[34%] -left-1 h-[8%] w-1 rounded-l-lg bg-slate-900"
  ></div>
  <!-- END Left Buttons -->

  <!-- Right Button -->
  <div
    class="absolute top-[28%] -right-1 left-auto h-[12%] w-1 rounded-r-lg bg-slate-900"
  ></div>
  <!-- END Right Button -->

  <!-- Screen Bezel -->
  <div
    class="absolute inset-0 flex flex-col overflow-hidden rounded-[2.75rem] border-2 border-slate-300/25 bg-gray-900 p-[3.5%]"
  >
    <!-- Screen with Promo Image -->
    <div
      class="flex h-full items-center justify-center overflow-hidden rounded-[2rem] bg-white bg-[url('https://images.unsplash.com/photo-1574285013029-29296a71930e?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover text-center"
    ></div>
    <!-- END Screen with Promo Image -->

    <!-- Screen with Promo Text -->
    <!-- <div
        class="flex h-full items-center justify-center overflow-hidden rounded-[2rem] bg-white text-center"
      >
        <div>
          <h2 class="text-lg font-bold">Mockup</h2>
          <h3 class="font-medium text-slate-600">Your content</h3>
        </div>
      </div> -->
    <!-- END Screen with Promo Text -->
  </div>
  <!-- END Screen Bezel -->
</div>
<!-- END Device -->