ContextQMD
Back to Daisyui

Browser mockup

packages/docs/src/routes/(routes)/components/mockup-browser/+page.md

5.5.191.2 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~browser mockup with border

<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 border-t border-base-300 h-80">Hello!</div> </div>
html
<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

<div class="mockup-browser bg-base-100 w-full border border-base-300"> <div class="mockup-browser-toolbar"> <div class="input">https://daisyui.com</div> </div> <div class="grid place-content-center h-80">Hello!</div> </div>
html
<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>