Tailwind CSS Phone

Class Name	Type	Description
mockup-phone	Component	Container element.
camera	Modifier	Add iphone dynamic island.
display	Modifier	Content container.

Use the mockup-phone component class to contain the phone mockup. The camera class introduces dynamic island UI elements. Meanwhile, the display class serves as a container for displaying items.

Image

This demonstrates how we use images as display.

<div class="mockup-phone">
  <div class="camera !z-0"></div> 
  <div class="display flex justify-center">
    <div class="artboard artboard-demo phone-1"><img class="size-full object-cover" src="https://cdn.flyonui.com/fy-assets/components/iphone/image.png" alt="phone background" /></div>
  </div>
</div>

FlyonUI

Tailwind CSS Phone

Basic examples

Default

Image

On this page

Phone