Browser Mockup

Browser window styled containers

Basic

With Border

Browser mockup using border styling

Preview Code Auto

Hello!

Div(
    Div(
        Div('https://daisyft.com', cls='input border-base-300 border'),
        cls='mockup-browser-toolbar'
    ),
    Div('Hello!', cls='border-base-300 flex justify-center border-t px-4 py-16'),
    cls='mockup-browser border-base-300 border'
)

With Background

Browser mockup using background color

Preview Code Auto

Hello!

Div(
    Div(
        Div('https://daisyft.com', cls='input'),
        cls='mockup-browser-toolbar'
    ),
    Div('Hello!', cls='bg-base-200 flex justify-center px-4 py-16'),
    cls='mockup-browser bg-base-100 border'
)

Class Reference

Class	Type	Description
mockup-browser	Component	Root container for browser mockup
mockup-browser-toolbar	Part	Browser toolbar section

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