Browser mockup
Browser mockup shows a box that looks like a browser window.
This page is not up to date. Some of the examples might not work as expected.
| Class name | Type | |
|---|---|---|
| mockup-browser | Component | Browser mockup |
| mockup-browser-toolbar | Part | Toolbar part which can include addressbar, etc |
Hello!
<div class="$$mockup-browser border-base-300 border"> <div class="$$mockup-browser-toolbar"> <div class="$$input border-base-300 border">https://daisyui.com</div> </div> <div class="border-base-300 flex justify-center border-t px-4 py-16">Hello!</div> </div>
<div class="$$mockup-browser border-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input border-base-300 border">https://daisyui.com</div>
</div>
<div class="border-base-300 flex justify-center border-t px-4 py-16">Hello!</div>
</div>
<div class="$$mockup-browser border-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input border-base-300 border">https://daisyui.com</div>
</div>
<div class="border-base-300 flex justify-center border-t px-4 py-16">Hello!</div>
</div>
<div class="$$mockup-browser border-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input border-base-300 border">https://daisyui.com</div>
</div>
<div class="border-base-300 flex justify-center border-t px-4 py-16">Hello!</div>
</div>Hello!
<div class="$$mockup-browser bg-base-300 border"> <div class="$$mockup-browser-toolbar"> <div class="$$input">https://daisyui.com</div> </div> <div class="bg-base-200 flex justify-center px-4 py-16">Hello!</div> </div>
<div class="$$mockup-browser bg-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input">https://daisyui.com</div>
</div>
<div class="bg-base-200 flex justify-center px-4 py-16">Hello!</div>
</div>
<div class="$$mockup-browser bg-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input">https://daisyui.com</div>
</div>
<div class="bg-base-200 flex justify-center px-4 py-16">Hello!</div>
</div>
<div class="$$mockup-browser bg-base-300 border">
<div class="$$mockup-browser-toolbar">
<div class="$$input">https://daisyui.com</div>
</div>
<div class="bg-base-200 flex justify-center px-4 py-16">Hello!</div>
</div>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
