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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the orientation-swap mechanics by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how toggling between the portrait and landscape classes animates both the frame's width and height at once via the cubic-bezier transition, and why the camera dot's position rule lives inside the same landscape class selector rather than a separate one. The same assistant can help optimize it — for instance whether animating width and height directly causes more layout recalculation than animating a transform-based scale would, or whether the seven fixed nth-child chart bar heights should be replaced with data-driven values. It's also useful for extending the mockup: ask it to add a third orientation state for a split-screen tablet view, swap the placeholder dashboard for a live iframe of a real page, or synchronize the rotation with a matching phone mockup on the same page. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a pure-CSS "tablet device mockup" with an animated portrait/landscape rotate in plain HTML, CSS, and JavaScript — no device photo, no library.

Requirements:
- A dark rounded-rectangle frame with uniform padding on all sides (representing an even tablet bezel, unlike a phone's uneven bezel), wrapping an inner screen element with a smaller border-radius so a consistent bezel gap is visible between the two.
- Exactly two orientation states, applied as classes on the frame: a portrait state with one fixed width/height pair, and a landscape state with those two values swapped.
- Both the width and height CSS properties on the frame must be transitioned with the same duration and an easing curve that gives a smooth, physical-feeling resize rather than an instant snap when the orientation class changes.
- A small camera dot element positioned via CSS on one edge of the frame in the portrait state, and repositioned to a different edge in the landscape state, so it moves as part of the same class-driven transition rather than needing separate JavaScript animation.
- A Rotate button whose click handler simply toggles between the two orientation classes on the frame element — no manual width/height calculation in JavaScript.
- Inside the screen, build a realistic small dashboard UI using real DOM elements (a sidebar with icon dots, a header, a few stat cards, and a simple CSS-only bar chart made from divs with fixed per-child heights) so the content visibly reflows within the frame as its aspect ratio changes between orientations.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA CSS tablet renders in portrait with a dashboard screen inside.
2
Press RotateThe frame animates between portrait and landscape dimensions.
3
Watch the camera dotIt moves from the side bezel to the top as it rotates.
4
See the content reflowThe dashboard layout adapts to the new aspect ratio.
5
Drop in your screenReplace the main area with your own tablet UI.
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 adapt beside a phone mockup.

Dashboard showcases

Frame an admin UI like a dashboard layout.

Portfolio and case studies

Present work in a bento grid section.

Landing pages

Pair with a product hero screenshot.

Kiosk and POS UIs

Mock a tablet app next to a metric card grid.

Learning CSS transitions

A reference for animating frame dimensions.

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.

Loading…