Tablet Mockup

Fetch pattern JSON: curl https://webspire.de/patterns/mockup/tablet.json

tablet.html

<div class="ws-mockup not-prose mx-auto w-80">

  <!-- Tablet body -->
  <div class="overflow-hidden rounded-[2rem] border-[7px] border-[var(--ws-mockup-border)] bg-[var(--ws-mockup-screen-bg)] shadow-2xl">

    <!-- Status bar with front camera -->
    <div class="flex items-center justify-between bg-[var(--ws-mockup-chrome)] px-6 py-2.5">
      <span class="text-[11px] font-semibold text-[var(--ws-mockup-chrome-text)]">9:41</span>
      <div class="h-3 w-3 rounded-full bg-[var(--ws-mockup-border)]"></div>
      <span class="text-[11px] font-semibold text-[var(--ws-mockup-chrome-text)]">100%</span>
    </div>

    <!-- Screen content area — 3:4 portrait -->
    <div class="aspect-[3/4] flex items-center justify-center bg-[var(--ws-mockup-screen-bg)]">
      <span class="text-sm text-[var(--ws-mockup-chrome-text)]">Replace with screenshot</span>
    </div>

    <!-- Home indicator -->
    <div class="flex justify-center bg-[var(--ws-mockup-screen-bg)] py-2">
      <div class="h-1 w-28 rounded-full bg-[var(--ws-mockup-chrome-text)] opacity-30"></div>
    </div>

  </div>

</div>

Details

Family

mockup

Tier

enhanced

Kind

component

Extends

mockup/phone

Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

mockuptabletipadshowcasepreviewscreenshotdevice

Slots

Name	Required	Description
screen	Yes	Content displayed inside the tablet screen — typically an img with a tablet screenshot

Portrait iPad frame for tablet app screenshots. Pair with mockup/phone for a responsive showcase showing both mobile and tablet views side by side.