Phone Mockup

Phone-style container mockups

Basic

Basic Phone

Preview Code Auto

It's Glowtime.

Div(
    Div(cls='mockup-phone-camera'),
    Div(
        "It's Glowtime.",
        cls='mockup-phone-display text-white grid place-content-center'
    ),
    cls='mockup-phone'
)

Variants

Colored Border

Preview Code Auto

Div(
    Div(cls='mockup-phone-camera'),
    Div(
        Img(alt="wallpaper", src="https://www.iclarified.com/images/news/94911/453966/453966.jpg"),
        cls='mockup-phone-display'
    ),
    cls='mockup-phone border-primary'
)

Class Reference

Class	Type	Description
mockup-phone	Component	Root container for phone mockup
mockup-phone-camera	Part	Camera part
mockup-phone-display	Part	Display part

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo