Tailwind UI Pattern Registry for humans and agents

device mockup frame tablet laptop screenshot presentation product product screenshot showcase on landing page SaaS dashboard preview in hero section app demo in case study portfolio project presentation need device mockup without Figma or image editing want CSS-only tablet/laptop frame need realistic product screenshot presentation

Device Frame

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/device-frame.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="device-frame"><div class="device-frame-screen"><img src="screenshot.png" alt="App preview"></div></div>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
1751 bytes · 68 lines
Custom Properties
--device-bg--device-radius--device-padding--device-shadow-color--device-border
Classes
.device-frame.device-frame-screen.device-frame-notch.device-frame-dark
device mockup frame tablet laptop screenshot presentation product

CSS-only device frame with a gradient shell (linear-gradient on body), inset box-shadow for edge lighting, and a blurred ::before pseudo-element for a realistic drop shadow. The screen area clips any image or video. Optional notch bar for tablet feel.

Product screenshot

<div class="device-frame mx-auto max-w-3xl">
  <div class="device-frame-notch"></div>
  <div class="device-frame-screen">
    <img src="dashboard-screenshot.png" alt="Dashboard preview" class="w-full">
  </div>
</div>

Dark variant for dark UI screenshots

<div class="device-frame device-frame-dark mx-auto max-w-3xl">
  <div class="device-frame-notch"></div>
  <div class="device-frame-screen">
    <img src="dark-dashboard.png" alt="Dashboard preview" class="w-full">
  </div>
</div>

Video in device frame

<div class="device-frame mx-auto max-w-2xl" style="--device-radius: 0.75rem; --device-padding: 0.75rem;">
  <div class="device-frame-screen">
    <video autoplay muted loop playsinline>
      <source src="demo.mp4" type="video/mp4">
    </video>
  </div>
</div>

Compact phone-style frame

<div class="device-frame mx-auto w-72" style="--device-radius: 2rem; --device-padding: 0.75rem;">
  <div class="device-frame-notch" style="width: 5rem; height: 0.3rem;"></div>
  <div class="device-frame-screen aspect-[9/19.5]">
    <img src="mobile-screenshot.png" alt="Mobile app" class="h-full w-full object-cover">
  </div>
</div>