Browser mockup

Browser mockup shows a box that looks like a browser window.

Class name
Type
mockup-browser
Component
Browser mockup
mockup-browser-toolbar
Part
Toolbar part which can include addressbar, etc

browser mockup with border

https://daisyui.com
Hello!
<div class="$$mockup-browser border-base-300 border w-full">
  <div class="$$mockup-browser-toolbar">
    <div class="$$input">https://daisyui.com</div>
  </div>
  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>
<div class="$$mockup-browser border-base-300 border w-full">
  <div class="$$mockup-browser-toolbar">
    <div class="$$input">https://daisyui.com</div>
  </div>
  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>

browser mockup with background color

https://daisyui.com
Hello!
<div class="$$mockup-browser border border-base-300 w-full">
  <div class="$$mockup-browser-toolbar">
    <div class="$$input">https://daisyui.com</div>
  </div>
  <div class="grid place-content-center h-80">Hello!</div>
</div>
<div class="$$mockup-browser border border-base-300 w-full">
  <div class="$$mockup-browser-toolbar">
    <div class="$$input">https://daisyui.com</div>
  </div>
  <div class="grid place-content-center h-80">Hello!</div>
</div>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details