webdevpuneet.com

Related Snippets

83 in Layouts category
53–58 of 60

Tablet Mockup

Phone Mockup

Email Inbox

Wave Divider

Split Screen Layout

Sticky Sidebar

Tablet Mockup — Free CSS iPad Device Frame Snippet

Tablet Mockup · Layouts · Plain HTML, CSS & JS · Live preview

CategoryLayouts
TagsData TablesCSS Grid

Copy & paste

Source Code

<div class="tm-stage">
  <div class="tm-tablet portrait" id="tmTablet">
    <span class="tm-cam"></span>
    <div class="tm-screen">
      <div class="tm-app">
        <aside class="tm-side">
          <div class="tm-logo"></div>
          <span class="tm-dot on"></span><span class="tm-dot"></span><span class="tm-dot"></span><span class="tm-dot"></span>
        </aside>
        <main class="tm-main">
          <header class="tm-head"><h2>Dashboard</h2><div class="tm-pill"></div></header>
          <div class="tm-cards">
            <div class="tm-card"><small>Revenue</small><b>$48.2k</b><i class="tm-spark"></i></div>
            <div class="tm-card"><small>Users</small><b>9,310</b><i class="tm-spark s2"></i></div>
            <div class="tm-card"><small>Churn</small><b>1.4%</b><i class="tm-spark s3"></i></div>
          </div>
          <div class="tm-chart"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        </main>
      </div>
    </div>
  </div>
  <button type="button" class="tm-rotate" id="tmRotate">Rotate</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Pure-CSS frame
No tablet image — crisp and theme-able.
Thin uniform bezels
Even padding for an authentic tablet rim.
Animated rotate
Width and height transition between orientations.
Repositioning camera
The dot moves bezels as part of the rotate.
Live responsive screen
Real DOM content that reflows by aspect ratio.
CSS chart and sparklines
Gradient bars with no SVG or canvas.
Slot-friendly
Swap the main area for any tablet UI.
No dependency
Pure HTML/CSS/JS for mockups and demos.

About this UI Snippet

Tablet Mockup — Pure-CSS iPad Frame with Rotate

Screenshot of the Tablet Mockup snippet rendered live

A tablet mockup frames a screen design inside an iPad-style device for landing pages, portfolios, and responsive demos. This one is pure HTML and CSS — no device photo — so it stays sharp at any size and holds live, interactive content. Its standout feature is a smooth portrait-to-landscape rotate that animates the frame's dimensions, in vanilla JavaScript with no dependency.

A frame built from nested rounded boxes

The device is a dark rounded rectangle with even padding (tablets have uniform thin bezels, unlike phones), wrapping an inner screen with a smaller border-radius. The constant gap between the two radii forms the bezel, an inset box-shadow adds an edge, and a soft drop shadow lifts it off the page. A small camera dot sits centered on one bezel and repositions when the device rotates.

Animated orientation change

Rotating swaps a .portrait / .landscape class that changes the frame's width and height (300×400 ↔ 400×300), and because both are transitioned with a cubic-bezier ease, the device visibly reflows between orientations rather than snapping. The camera dot's position is also class-driven, so it moves from the side bezel to the top bezel as part of the same transition — a detail that makes the rotate feel physical.

A responsive screen inside

The screen holds a real dashboard layout — an icon sidebar plus a main area with stat cards and a CSS bar chart — built with flexbox and grid. Because it's live DOM, the content genuinely reflows inside the frame as the aspect ratio changes, which is exactly what you want when demonstrating a responsive design across orientations.

CSS-only chart and sparklines

The stat cards use gradient-filled sparkline bars and the chart is seven <span>s with :nth-child heights — no SVG or canvas — so the whole screen is lightweight and recolors with a couple of variables. It's representative filler you can swap for your own components.

Reusing it as a wrapper

Keep the device markup as a component and replace the .tm-main contents with your screen. Pair it with a phone mockup to present a responsive design on two devices at once, or drop a single screenshot in for a clean portfolio shot.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA CSS tablet renders in portrait with a dashboard screen inside.
  2. 2
    Press RotateThe frame animates between portrait and landscape dimensions.
  3. 3
    Watch the camera dotIt moves from the side bezel to the top as it rotates.
  4. 4
    See the content reflowThe dashboard layout adapts to the new aspect ratio.
  5. 5
    Drop in your screenReplace the main area with your own tablet UI.
  6. 6
    Reuse as a wrapperKeep the frame as a component with a screen slot.

Real-world uses

Common Use Cases

Responsive design demos
Show a layout adapting beside a phone mockup, with a pure-CSS frame and thin, even bezels that give an authentic tablet rim.
Dashboard showcases
Frame an admin UI built like a dashboard layout, with a sample screen containing charts, cards and sparklines.
Portfolio and case studies
Present work in a bento grid, with an animated portrait and landscape rotate transitioning width and height.
Landing page hero shots
Pair with a product hero screenshot, with the camera dot repositioning between bezels as part of the rotation.
Kiosk and POS mockups
Mock a tablet app beside a metric card grid, and learn how animating frame dimensions produces a convincing orientation change.

Got questions?

Frequently Asked Questions

Rotating toggles a portrait or landscape class that changes the frame's width and height (300×400 versus 400×300). Both dimensions have a CSS transition with a cubic-bezier ease, so the device visibly reflows between orientations instead of snapping. The camera dot's position is class-driven too, so it slides to the new bezel during the same transition.

Pure CSS. It's a dark rounded box with uniform padding wrapping a nested rounded screen; the gap between their radii is the bezel. There's no device photo, so it scales without blurring and you can recolor the frame or resize it just by changing CSS values.

Yes. The screen is live DOM built with flexbox and grid, so when the aspect ratio changes the dashboard genuinely re-lays out within the frame. That makes it useful for demonstrating a responsive design across orientations, not just showing a static picture.

Replace the contents of the .tm-main element (or the whole .tm-app) with your markup. The frame, bezels, and rotate logic are independent of the screen content, so your UI only needs to fit the screen box. Keep the device part as a reusable wrapper to swap screens easily.

Make the frame a component with an orientation prop or state that toggles the portrait/landscape class, and expose a screen slot for children. The rotate is a one-line class flip. In Tailwind, set the two orientations with conditional width/height utilities and add transition-[width,height] so they animate.